Streaming live at 10am (PST)

Fixed Header/Navigation needs margin space after section top


#1

Having in mind that topic Getting Webflow’s smooth scroll script to align correctly with fixed headers/navigation corrects almost all bugs in nav/headers, I still could not solve my problem...

-- Check both images, please.
The first is how the anchor is working, with the anchored section starting right below it:

The second shows a top margin of 50 px that I'd love to have, from the top of each section:

-- Important
- Tried 'Header' as a class but couldn't find the HTML5 Tag option at new UI
- Tried Padding and Margin Top, both didn't help

Feel free to check it at:
https://preview.webflow.com/preview/henriquefoca?preview=0050e01e6d3304f9a84ae5af2b4a2b81


#2

Hi @henriquefoca

If I am following, you would like the fixed nav to sit inside the yellow work section when you click on the "work" navigation element. Currently it sits on the dark section above the work section.

To fix this add the work ID to the container instead of the work section. I would then reduce the padding on the section element and add a class to the container in order to increase its padding. Adjusting the padding values on the container will effect where the nav bar ends up when it scrolls. You can also add margin to the navigation if you don't want it to always be flush with the top of the browser window.

Does this answer your question?


#3

Thanks David, but apparently it doesn't.
When I used and ID to a container I got: Could not find section with ID: Work

I've tried to put the NavBar inside of a section, tagged HEADER and it worked well. Just for Work section that I still have a wrong alignment to the top.... I'll keep looking for an answer tough...


#4

Well, guess I did it right now setting the same stuff to all Sections. Now the anchor is going cool smile
Thanks so much!


#5

Sorry I should have mentioned. When you delete an ID it breaks the link. You have to go back to the Work link and reset it.

Glad things are working for you now.


#6