Nav bar issue when link scrolls to section

Design help General
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.

http://vincent.polenordstudio.fr/snap/aprjt.jpg

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

http://vincent.polenordstudio.fr/snap/fsuwm.jpg

http://vincent.polenordstudio.fr/snap/k78mt.jpg

Now it does what you wanted.

http://vincent.polenordstudio.fr/snap/2eqba.gif

1 Like
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

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

6

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

thanks,

Simon

7

If anybody still needs a fix, simply putting the ‘Navbar’ within its own ‘section’ instead of the ‘body’ sorts it reet out…

1 Like
8

Hi Dave.

I tried putting it in its own section still no luck. Can you take a look and see what I am doing wrong?
https://preview.webflow.com/preview/powered-rentals?utm_medium=preview_link&utm_source=designer&utm_content=powered-rentals&preview=553c7a738cfbc9d39eea72e22bc3e256&workflow=preview

9

Hey man!

It looks to be sorted with the hero bit at the top of the page, the video sits nicely underneath the nav bar (rather than directly below it):+1:

The only thing now from what I can see is that each ‘I-container’ could do with more padding (currently set at 3.33em) to bring it below the navbar…11em looks about right. Setting the max width of the nav bar to 100% pushes it out full screen too - but that’s stylistic advice rather than functional haha :+1:

hope that helps!

Cool site, cool concept by the way :+1:

10

Hey Dave,

Thank you for the reply. Yeah, I think I will do the padding method as you suggested. I was thinking of giving it some other anchor points but then I lose the ability of the navbar link highlight when scrolling through that section.

It is surprising they don’t have a fix to this yet. Just give us a data attribute to the scroll position with some margins as value.

Thank you for the kind words about the site :slight_smile: