Hide the menu bar until scroll

zippitybop

Hi Marius and Armin!

really enjoying the speed I can achieve with lay theme! However I have hit a wall.

I would like to hide the menu bar, logo and menu items until the user starts scrolling. I have to admit I'm not good at jQuery, so I am a little lost.

I've tried following this support item but it only hides the menu items (currently still have the code in <head>) and it is a bit janky in the sense that it doesnt work until I have started scrolling back up.

and I've found this on StackOverflow but I'm not sure how to adapt it to my page (sh*t at jQuery).

My website is http://wordpress.p507516.webspaceconfig.de/.

Thanks in advance,
Darius

mariusjopen

Dear @zippitybop
you want to hide the whole white bar or only the menu in it?

jQuery is not so difficult. I will help you a bit:

Hide the Navigation with CSS and opacity 0
https://developer.mozilla.org/de/docs/Web/CSS/opacity

.primary {
opacity: 0;
}

Make a jQuery function which gets active on scroll
https://api.jquery.com/scroll/
When you scroll you add a class to the body of the website which is called scroll
https://api.jquery.com/addclass/
Write a CSS which shows the navigation when the body has the class scroll

.scroll .primary {
opacity: 1 !important;
}

That should work.
If you want to be more sophisticated, you can have another look in the Stackoverflow you sent me.

Best!

Marius

zippitybop

Hi again Marius,

I WILL try this, thanks dude! I wanted to hide the entire white bar, logo and menu items.

I'll set up another staging and see how it goes.

Cheers,
Darius

mariusjopen

Dear @zippitybop
great! I hope it will work out well!

Best!

Marius