Sticky Nav not working with in-page linking

Hey team,

I’m using the beta panel and have set my navigation position to “Sticky”. The smooth scroll script is not aligning correctly with the anchored sections, so the top part of each section is getting cut off. The navigation is a standard Navbar component directly inside the body. So according to the documentation I’ve read it should treat the bottom of the nav as the top of the page. I’ve tried changing the position to “Fixed” as well, but this still does not work. Anyone have any suggestions? Thanks,

Yogesh


Here is my site Read-Only:
https://preview.webflow.com/preview/j2t?utm_source=j2t&preview=a47b7639227cff68ca6ff963be9499de

  • Sticky is for when your element is actually down the page and you want it to behave like a fixed item once reaching the top, or bottom, or another position specified relatively to the top or bottom.
  • when sticky, an element is losing some of its properties regarding the flow of elements: it’s not taken into account in the flow, until a sibling, or the boundaries of its parent, reaches it
  • the behavior of a section smooth scrolling up because it’s called by an anchor link is specified by Webflow for any Navbar element that is fixed. Section then stops at the bottom of the element, unless you specify that it shouldn’t or that the menu takes up the height of the page (2 options in Settings)
  • when you have an element that’s already at the top of the page and you want it to stay there, you should use position:fixed instead
  • to set anchor links in Webflow, avoid using the URL link field, use the third button, for anchors, and select your target ID in the list below.

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

So here, if you use Fixed instead of sticky for the Navbar, and set the anchor like explained above, you’ll get the behavior you expect.

Thanks for the reply @vincent,

  • I did have the navbar set to position:fixed previously and was experiencing the same issue. I went to position:sticky because that at least prevents the first section from disappearing behind the navbar. What am I doing wrong?
  • I would love to use the anchor button, but unfortunately my client wants all these anchors to be linked from the dropdowns in the main nav. As far as I can tell, the only way to acheive this is through the URL link field. Please correct me if I’m wrong.

@vincent I can make it work by giving the top element a margin-top equal to the height of the navbar, but that only works if I’m linking to an anchor on the same page. If I link to an anchor on a different page, the issue persists and the top of the section is hidden behind the navbar. But from what I’ve read, webflow should automatically calculate the height of the navbar, and I shouldn’t have to add that margin?

Haa I get it, sorry. Yes. Then if you’re not going to have more than a handful of pages, maybe you can skip having a symbol for your menu, and craft a different one, using anchors in the links panel, for each page? I know it’s not a real solution but can you consider it?

Yeah @vincent , I did consider that. But even if you have a unique menu for each page, to get to anchors on other pages you still need to use the URL to get to anchors on other pages right?

Oh, yes, that’s a given… And no smooth scroll by definition. But imho jump to page + scroll is not so much of a nice UX. You could try to do something different by using the Page load IX trigger, and add a slight fade-in with a vertical down translation at the same time. You’ll “feel” that you just scrolled to the section. (maybe, has to be built and fine tuned.)

Or it’s maybe a design issue more than a technical issue.

The use case should be that an anchor link to another page is something efficient, and principally done by visitors, people that are not the site’s owners.

It the site’s owners want to put certain content front and center and accessible quickly in the best conditions, they should use pages, one for each topic they want to access directly.

Anyway, a developer could make you a nice JS that’s swapping the links to other ones when the link is supposed to lead outside the page.

Thanks @vincent, I agree that it’s not a great UX. I tried to talk them out of the dropdowns, but they insisted. I’m sure there is some JS out there that could make it work better, but that’s above my pay grade :slight_smile:

I solved by creating a new div which I used as an “anchor”. I positioned it absolute and give it negative top value same as the height of the nav. Then just linking to the anchor instead of the section directly.