Issues with Navbar overlap when using in-page linking

Design help General
1

Here’s my public share link: https://preview.webflow.com/preview/paragon-website-v3-c343af50169b7eaadd23?preview=f599697d076d1f15299e1ffc7c91246d

I’m struggling to fix an issue with the in-page linking. When I link to the section on the page the fixed nav bar at the top overlaps the top of the section.

I’ve tried everything to try and fix this, literally spent hours trying to work out why it’s happening! It’s incredibly frustrating as I wasn’t having this issue on earlier versions of my site.

Can anyone please help?

Thanks in advance.

2

Hi, @James2

My suggestion:

  1. Wrap “NavBarFixed” with the div
  2. Choose HEADER tag for that wrapper
  3. Make header position: fixed and navbar inside of that header position: relative or auto

Regards,
Anna

3

Hi Anna,

Thanks for your suggestion, I managed to get it to work by doing steps 1 and 2 and then instead of step 3 I left the navbar with it’s position fixed. It now sits inside the header div which also has it’s position fixed. For some reason having it relative or auto (as you suggested) pushed it over to the left and made a gap on the right hand side.

Not sure why but this is my first Webflow website so I’m still getting the hang of everything!

Thanks so much for your help :smile:

4

You just forgot to set aligning for the fixed header (left/top/right/bottom properties):

Also, I would not recommend having fixed positioned element inside the fixed positioned element. It may show up differently in different browsers.

Regards,
Anna