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:

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

.primary {
opacity: 0;
}

2. Make a jQuery function which gets active on scroll
   https://api.jquery.com/scroll/

3. When you scroll you add a class to the body of the website which is called scroll
   https://api.jquery.com/addclass/

4. 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