Streaming live at 10am (PST)

Nav bar issue when link scrolls to section


Hey guys,

I’ve linked a nav link to a section on the page. When clicked the scroll works and gets to the section but the section doesn’t stop at the top of the page as I’d like.

It looks like it falls short the same height as the nav bar which is 100px high.
I’ve tried various settings but haven’t found a fix.

Can anyone tell me a way around it please??

I’d like the portfolio section to stop at the top of the screen.


Here is my site Read-Only:
(how to share your site Read-Only link)


Provided that the site’s structure is quite clean — with the Navbar element directly under the body, and the targeted section at the same level (yours seems very fine) — this ↓ used to be the solution you are looking for.

However, it doesn’t seem to work anymore. I tested it on a new site and I can’t figure out if the feature is broken or if I don’t really remember what it’s for. I was talking about this feature in a blog post ↓ with screen capture of the effect so I think it was still working not too long ago.

I told @Brando about this, he will let us know what’s going on. (thanks @brando!)

As for now, you still have ways to hack it to get the desired effect:

Your navbar is 100px height:

  1. Remove the IDs from the sections, and give them position:relative(important)
  2. Place an width:100% height:1px``position:absolutediv inside of your targeted section.
  3. Stick it to the top and offset it 100px downwards.
  4. Now give this div the targeted ID that was on the section before

Now it does what you wanted.

1 Like

Awesome - thanks so much for taking the time for the fix.
Be nice to know when the scroll offset setting is fixed too.

Thanks Again

Kind regards

    **Freelance Graphic Designer**

  07912 446951


Hi @vincent, @danielcobb, here is an article that shows the conditions needed for getting the smooth scroll to align: Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation

I noticed that the hero section is not set to type header, it is set to type Div, however the navbar is set correctly to disable the offset.

I hope this helps.

My best,

1 Like

@cyberdave I have no trouble to make the scroll stop at the bottom of the Navbar when this one is position:fixed, and that even if there is no Header HTML5 defined. This pretty much works out of the box if Navbar and sections are just under the body.

What I was pointing out here is that the Navbar option “Disable scroll offset when fixed” — which is what @danielcobb wants to achieve — doesn’t work anymore (and it used to work).

I have built a site just to test that. Can you succeed make this option work? To be clear, the goal is to have the targeted section scroll up to the top of the viewport (for when the navbar is transparent or translucent).

In Vlad’s post, I don’t really get what the presence of a Header HTML5 element is required for.


I’m experiencing this issue too.

In cyberdave’s reply he mentions having the hero section as a header, rather than a div. I’m still at the point where I don’t understand the subtleties of this, and have not noticed anything about a hero section needing to be a header element. I was under the impression that a div, if it’s styled correctly, can do pretty much anything (within reason).

So is it good form for my hero section to be a header, not a div?

Edit: actually, it’s a ‘section’, not a div. This is what some of the instructional videos suggested I’m pretty sure