Show/Hide Navbar on Scroll - top section aligns to top of page

Design help Animations & Interactions
1

After creating a ‘Show & Hide Navbar on Scroll’ interaction, I always find that my first section just below the Navbar now aligns to the top of the page, underneath the Navbar. I then add Margin to move it down to the bottom edge of the now-fixed NavBar. The trouble is, on mobile views, this amount of margin needs to be adjusted for each view.

How can I have the top of the first section automatically align to the bottom of the fixed NavBar without having to manually add margin?

Here is my public share link: LINK
(how to access public share link)

2

hi @sebrame you can achieve it by custom code. Here is very simple example of one way how to You can take it from there further.

// get height of your navigation
const navHeight = document.querySelector('.navbar').clientHeight
// get your first element under navigation eg. hero
const hero = document.querySelector('.hero')

// set margin top 
hero.style.marginTop = `${navHeight}px`;
3

Thanks for that Stan.

Strangely enough, Support advised me to watch the video on Sticky Navbars. Setting the Navbar to ‘Sticky’ instead of ‘Fixed’ as shown in the Show/Hide on Scroll video did the trick!

1 Like
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.