Hide menu on page load

Is there a way to have no navbar/menu when the site loads but only when the user starts scrolling? I have a Hero page set to expansive width in settings and full screen padding, and, on page load, the menu appears at the far right and logo far left. When I scroll the menu jumps to the ‘inward’ width setting. I’d like for the expansive width menu (ie, the page load menu) not load or at least be invisible and the menu/nav bar to only appear once the user starts to scroll and be sticky. Thanks for your help

I haven’t managed to get my head around the interaction manager yet, but that sounds possible with hide menu on page load, load menu when you scroll 100px or whatever.
Just basing these thoughts on a video @norm posted a couple of weeks ago with the menu changing color.

My caveat: I’m a complete idiot and may be very wrong!

Indeed there is a video explaining that.

The interaction is showing the previously hided nav until the browser reaches a custom height.

For example: if Scroll Y is greater than 100px (for example), toggle visibility of the nav bloc.
If scroll Y is less than 100, toggle visibility of the same bloc and it will be hided again.

2 Likes

So I fixed it and here is what I did. I used Claude AI to analyze my site and told it what the problem was and what I want to happen. It spat back some css and javascript and told me to put it in the header of my page. I did and it didn’t quite work so I told it to look again and it said it found the problem and spat out some new code. I did 3-4 iterations like that fine tuning the look and action and then the problem was solved.

1 Like

Give us a peek at how it looks when available to view!