I'm currently working on the following site:
http://strauss.co.at/sup/
I'd like to use bootstrap's scrollspy to keep track of the current menu item. i added the data-spy="scroll" and data-target="#navbar" to the body tag. #navbar is the container of the bootstrap nav component (this is what I found is in lots of different articles here on stackoverflow and other sites). still it does not work. what am I missing here?
Additionally, I'm using the affix plugin to make the menu sit on the top of the page after a specific offset. I can see a little jumping there. Is there any way to smooth this? should I do it with css 3 transitions or is it more of a content-element-that-gets-pulled-out-of-the-flow problem?
thanks
You're really close! You just have to change the href on the anchor elements to the id of the element you want to link the scrollspy to.
For example, where you have:
SUP in der Physiotherapie
You should have:
SUP in der Physiotherapie
Note that simply changing this with inspect element won't work, whereas Bootstrap uses javascript when the DOM first loads to initiate the scrollspy.
Thank's so much!
I just noticed that TYPO3 automatically added the path to the links. I didn't have it in my template.
I figured out that I can also solve this by adding the data-target="#id attribute to the link.
Related
From the website of bootstrap 4, it stated that in order to use Scrollspy, there are a few requirements. One of the requirement is
"Scrollspy requires position: relative on the element you’re spying on, usually the ."
However, it seems that Scrollspy works fine without body {position:relative} in the case of is the element being spied
Using a Scrollspy example from w3school w3schoolScrollspyexample
Even if i delete body {position:relative} from style and hit the run button, the Scrollspy function still works.
Here is the w3schools example without body{position:relative}
w3schoolScrollspyexampledelposition:relative
it work just fine
Can anyone please explain to me why the above example works even without body {position:relative}?
Body tag doesn't require position:relative to work, as it already covers the entire view port. In fact, defaults to position:static, much like any other element, and defaults to position:relative, which does all the work.
The <body> tag doesn't need any position:relative to work, it is just needed mandatorily in elements other than tag, and this is mentioned in W3Schools documentation for BootStrap4 scrollspy.
Have a look at it here: https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp
This question already has an answer here:
Why are buttons discouraged from navigation?
(1 answer)
Closed last year.
I've been reading up on web accessibility and read that anchor tags should only be used when the user will be taken to another URL without JavaScript. But buttons should be used whenever some other behavior should happen, such as opening a modal.
So I'm wondering if it's okay or expected to have both buttons and anchors in a nav. Something like this:
<nav>
Home Page
About Page
<button>Sign Up</button>
</nav>
Say in this situation the signup button launches a modal or does some other behavior that doesn't take the user to a different URL. Is it okay to have both in the nav? I'm not concerned about styling, I'll make these look consistent, but I'm wondering what's the most correct way to handle something like this?
From an accessibility perspective, using both links and buttons is the semantically correct way to go. The links take you to another page (or somewhere else on the current page) and buttons perform an action. A screen reader user will understand when they hear "link" or "button" in the same <nav> that different actions will happen.
As mentioned in the previous comments, yes, it is completely fine to use both inside your navigation.
If you really want to you can use <a> elements for all, but for the buttons you would include the role="button" attribute which is semantically equivalent to using <button>.
<nav>
Home Page
About Page
<a role="button">Sign Up</a>
</nav>
Yes it's totally fine to use either buttons, anchors or even div inside the navbar however you want you can do it. You just need to be comfortable using css and styling which you say you are. Then you should have no problem. Does that answer your question?
Any flow content elements are allowed in a nav tag, and that includes buttons.
I am using Responsive Hexagon Grid as my base layout. After clicking a hexagon, I want a Modal to show up. For that I'm using Materialize CSS. However, After importing materialize CSS, the hovering effect of hexagon.css is completely messed up!
Is there any way I can solve this and get original hover effect like below? I'm new to this stuff.
https://github.com/web-tiki/responsive-grid-of-hexagons
See the error here:
http://imgur.com/a/IhO5Q
(You may need to Google about Materialize CSS as I'm not allowed to post more than two links here).
I'm answering my own question here:
The conflicting code was for h1 tag. You just have to remove bottom padding from h1 tag to get things work!
On the wordpress site i'm building a want a link that refers to a section on the same page.
Code here:
test
The code on the landing section here:
<a name="offer"></a>
Somehow the link is ignored. Maybe it has to do with the wordpress setup? Here the site: http://bbwebdes.myhostpoint.ch/webauftritt/
I've tried everything with relative and absolute links but nothing is working and I have no clue why.
You need it to be an ID if you're referencing an internal link
<a id="offer"></a>
Also might I suggest using a DIV or a SPAN instead of using a link, since it could lead to horrible outcomes.
<span id="offer"></span>
Your code has two mistakes.
You should use id instead of name.
and you should use div or span instead of a.
Try this:
<div id="offer"></div>
//<a id="offer"></a> --> Dont use this
Here's the website I'm working on: http://104.193.173.104/modx/
The top navigation has 2nd and 3rd levels that are generated by Wayfinder in ModX. As far as I can tell from the page source and chrome inspector, they are generating properly and have the appropriate CSS classes. When I click one of the nav links, the inspector shows the li class change to "dropdown open" and a ul class "dropdown-menu" appears. I can see the outline in inspector, but nothing is showing on the page.
I'm guessing this is a z-index problem in my CSS, but I'm not very familiar with how all of that works. Is anyone able to help me? Let me know what HTML/CSS you need me to include and I'll edit this post. Cheers!
note: My jQuery is called in the head of each page
Your navigation div (#main-navigation-container) has overflow:hidden. You'll need to figure out what you want to do there but that's why it's being "cropped" out.