<![CDATA[Hide the menu bar until scroll]]>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

]]>https://laythemeforum.com/topic/4126/hide-the-menu-bar-until-scrollRSS for NodeMon, 08 Jun 2026 02:12:18 GMTThu, 14 Mar 2019 11:09:01 GMT60<![CDATA[Reply to Hide the menu bar until scroll on Thu, 21 Mar 2019 10:10:33 GMT]]>Dear @zippitybop
great! I hope it will work out well!

Best!

Marius

]]>https://laythemeforum.com/post/13131https://laythemeforum.com/post/13131Thu, 21 Mar 2019 10:10:33 GMT<![CDATA[Reply to Hide the menu bar until scroll on Wed, 20 Mar 2019 10:43:07 GMT]]>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

]]>https://laythemeforum.com/post/13122https://laythemeforum.com/post/13122Wed, 20 Mar 2019 10:43:07 GMT<![CDATA[Reply to Hide the menu bar until scroll on Fri, 15 Mar 2019 12:36:44 GMT]]>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;
}

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

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

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

]]>https://laythemeforum.com/post/13072https://laythemeforum.com/post/13072Fri, 15 Mar 2019 12:36:44 GMT