Streaming live at 10am (PST)

Linking to a section on a page with sticky navbar

Hi everyone, I have a home page with sections, which I would like to link to from other pages of the website. But since I have a sticky navbar, it always links to the title which is behind the navbar. Does anyone have any solution for this?
This is my read-only link: https://preview.webflow.com/preview/hollestudio?utm_source=hollestudio&preview=9625ae30eb08792c17d985d8981cfb90

This is the page URL I’m linking to: https://hollestudio.webflow.io/#projects

Thank you,
Naama.

When visiting the destination URL, the behavior I observe is that the preloader shows the animated gif, and when the interaction hides the element, I am viewing the #projects section. This appears to be what you want, right?

If you wanted the home page top menu on another page, to have a link to the #projects section on the home page, you would need to copy the menu, then change the link to be an external link “/#projects” or an absolute link. Of course you can’t follow those in the designer, only on publish.

Very nice looking site by the way. I like the creative use of the animated gif.

Please let me know if I misunderstood your goal or issue.

Hi @webdev, thank you for the compliments, although it’s not my design, I’ll pass those to the chef…:wink:
I’ve removed the preloader, so i’ll be able to better explain the problem.


when going to this URL, you can see that the title “projects” is hidden by the main menu?

The first section#home needs to have a margin top of 104.63 pixels to adjust for the height of the sticky menu. Then your problem goes away. Just don’t hide the menu.

I would recommend rounding your menu height to be an even number. Better performance for the client.

Unfortunately it does not solve the problem. I if you go to this page, for example: https://hollestudio.webflow.io/projects/hagar-eilam and then click the X round button to go back to all projects, the problem remains.

“Update 2020” - this idea solved (Set this checkbox to false = offset) without any extra setting:

IF this idea not working in your case (The “old answer”)

No way to solve this without some “TRICKS” (I hope webflow will add “from-top” option for anchor links).

The most simple solution (You’ll find smarter solutions):

  1. Create empty div (Put ID for this div) - position: relative; and minus the height of the nav:

image

scroll her and click on go to section2:
http://site-ae5a37.webflow.io/home-copy

http://site-ae5a37.webflow.io/#section-2-fix-anchor

  1. Done :slight_smile:

More complex/elegant ideas her:

3 Likes

Thank you @Siton_Systems , you rock!!! I don’t care if it’s not elegant, your solution fixed my problem!

1 Like

Great! Please mark as solution to close this topic :slight_smile:

Hello everyone, I thought the suggested solution solved the problem, but on some screens it didn’t.
when I click “קצת עלינו” link, the window should scroll to the right section, but since there’s a fixed navbar, it goes too high, behind the navbar.
I’ve added a new section width -100px top margin, but it on some screens, it still goes to the wrong place.

This is the preview link: https://preview.webflow.com/preview/alma-studio?utm_source=alma-studio&preview=9e4995e744fff57ed4ab4daa0dfb2893

and the website: alma-studio.webflow.io

Any help would be highly appreciated!!!

Thank you,
Naama.

genius! Perfect solution

Did you try this idea? (This post is little old)

1 Like

Not sure how something so easy to code is giving me so much grief in WF, but can someone show me what I am doing wrong.

I have a nav bar with links anchored to sections of the page. I’d like to offset the nav bar so when a user click on a link and it scrolls to that section, there is an appropriate amount of space between the top of that section and the nav bar. Not sure why I can’t get this to work with “sticky” position, also the active link states are way off when scrolling, is this a bug?

https://trialattorneymjh.webflow.io

https://preview.webflow.com/preview/trialattorneymjh?utm_medium=preview_link&utm_source=designer&utm_content=trialattorneymjh&preview=dcbee37352aaeb76f15c9869606b1e0b&mode=preview

Hi @raltamirano, one work-around is the following:

  1. Create a div, let’s call it 2fixAnchor.
  2. Define it with height:0, position: relative, top: -82px (which is your navbar height).
  3. Place this div before each section you want to link to
  4. Remove the section’s ID and give it to the 2fixAnchor div instead.
  5. Fix your navbar links, so it will link to the new divs

If your navbar height is different for a specific breakpoint, then you should change the 2fixAnchor top configuration accordingly.

@Naama Thanks for sharing. This does seem to work when correcting the offset issue I was having, but now I seem to lose the Current state on the nav link and when I set a height to 2fixAnchor div, the active link state is way off when scrolling, is this a bug? @webdev

https://trialattorneymjh.webflow.io/

https://preview.webflow.com/preview/trialattorneymjh?utm_medium=preview_link&utm_source=designer&utm_content=trialattorneymjh&preview=dcbee37352aaeb76f15c9869606b1e0b&mode=preview

I don’t think it’s a bug. I think it’s because the 2fixAnchor div has height:0. Try to give it some height and perhaps play with the top and bottom values.