Streaming live at 10am (PST)

Nav bar issue when link scrolls to section


#1

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.

TIA


Here is my site Read-Only: https://preview.webflow.com/preview/daniels-top-notch-project-3255e8?preview=f0b7bdafab94149a9aba5f05b3f0b438
(how to share your site Read-Only link)


#2

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.


#3

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**

  hello@danielcobb.design

  07912 446951

    [**www.danielcobb.design**](http://www.danielcobb.design)

#4

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,
Dave


#5

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

https://preview.webflow.com/preview/navbar-and-scrolls?preview=f3088625cfd32acf0a744eb358f2646d

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