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 -
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
- Hide the Navigation with CSS and opacity 0
-
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 -
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it