On my top nav bar, I’ve some items : Home, Products, FAQ, Contact etc…
The Home link does not work (if you scroll down to the bottom of the site then click “Home” on the nav bar, nothing happens)
For a menu item with drop-down sub-menus, is it possible to use the menu item itself (“Products”) as a link? I don’t see that option.
When you click on the FAQ click, the page scrolls down and overshoots the section, resulting in the “Frequently Asked Questions” header being hidden. How do I get it to stop right at the Frequently Asked Questions text? Same for the About link as well.
You’ll want to create your FAQ section ID for the entire section (see screenshot below). The top of that section then becomes the top coordinate to which the browser will scroll. Same for the About link.
Hi! Tks for your help, I managed to solve 1) and 2).
However, for 3), I think I know what’s the issue.
The section scrolls up to the desired location correctly when I click the respective top nav bar links, but the top nav bar menu thing is blocking the title of that section lol
If you click on the FAQ or Contact Us on the top nav bar, the title of that section is hidden under the top nav bar.
Is there a way to offset this? Besides adding more padding to the title?
I understand exactly what you’re talking about, and I’m not sure of a solution that will allow you to do that without adding extra space, considering the persistent bar is overlapping the title.
Hi @Nikar, to get the section scrolling working correctly with a fixed navbar, I would suggest to read this post below, it shows what conditions are needed in order to get the correct section scrolling when using a fixed navbar.
A couple of more layout changes that may be required/recommended:
I would remove the position fixed on the navbar, and instead, put that navbar into a section just under the body element, with a position fixed to the top and a tag of header
I would put each of the next section directly under the body, instead of nesting those under the body container.
I would make the tag for each section (except the nav section) set to a tag of div
I hope this helps! I am happy to take a look further if you make some updates
Hi Dave, I checked out the article above and followed it, and also did the 3 changes you outlined above, but I must have done something wrong, cos’ now the nav bar behaves weirdly (if you scroll down, the nav bar appears, disappears then appears again like hide-and-seek).
Also, the sections titles are still covered by the nav bar when I click on the nav bar links.
Basically, I want the banner to fill the width of the tablet view, and the height should just follow along retaining the aspect ratio. I tried “auto” and “100%” in the Homepage-Slider class but it makes it worse.
Same for the About link.
