Need help with alignment of fixed navbar when section scrolls

Hi all,

See my link here: https://preview.webflow.com/preview/mysite-832ea3?preview=840feeb8000baa4f7c2db962afda8464

On my top nav bar, I’ve some items : Home, Products, FAQ, Contact etc…

  1. 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)

  2. 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.

  3. 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.

Tks! :slight_smile:

  1. I saw the same behavior. Try changing the Home link to point somewhere else, then switch it back to Home. Seemed to fix it for me.

  2. Take a look at this post from earlier this month where @vincent shows what seems to be what you’re looking for: Get dropdown button to link to a new page - General - Forum | Webflow

  3. 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. :smile: Same for the About link.

1 Like

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

See the updated site: https://preview.webflow.com/preview/mysite-832ea3?preview=840feeb8000baa4f7c2db962afda8464

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?

1 Like

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. :pensive:

1 Like

Hi, tks! Never mind, in that case, I’ll just use padding at the top :smiley:

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:

  1. 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
  2. I would put each of the next section directly under the body, instead of nesting those under the body container.
  3. 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 :slight_smile:

2 Likes

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.

Here’s the updated site: https://preview.webflow.com/preview/mysite3a?preview=0a01f7d4fef6cd27b6ea2a9c43ac1334

I think I’ve broken my own site lol :smiley: shit!

Hi @Nikar, thanks for letting me know. I took a quick peek at the site, and I think it is looking a lot better from the structure perspective :slight_smile:

Here are some additional suggestions:

I hope this helps, if you get stuck with the mobile views, feel free to post on that:)

1 Like

Hi Dave,

I followed the video and it works perfectly now! The video was unexpected, tks for going the extra mile! I appreciate it! :smiley:

Hi,

I’m working on the tablet view now, and everything is ok, except the hero banner at the top. It’s height is giving me some issues.

Go to https://preview.webflow.com/preview/mysite3a?preview=0a01f7d4fef6cd27b6ea2a9c43ac1334
Switch to tablet view. You’ll see there’s a ton of space at the bottom of the banner. Should I hardcode the height of the hero image to a size like 500px?

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.

Tks! :smile:

A post was split to a new topic: Need help with alignment of fixed navbar on section scrolling

This topic was automatically closed after 60 days. New replies are no longer allowed.