Archived topic
Mobile Menu Sticky Header
10 replies · Started by Andrew on September 28, 2021
Hello Again,
I have added some CSS to make my mobile menu toggle button have a red border, I like the way its styled with this effect. I've noticed that when I'm on a small enough screen such as a cell phone to see it, when I scroll down the toggle button changes to another style, I was wondering how I could make that one match how it looks before the page is scrolled down. For the CSS below I can change the background color, but it looks like it takes up the full height of the header, and also is aligned to the right with no margin.
https://drive.google.com/file/d/1JX7fS8lhIPWQI15g3OfQEoLPKGBxCKrh/view?usp=sharing
.menu-toggle {
background:green!important;
}
Hi there,
Any chance you can link us to the site in question?
You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Sorry forgot about that, please adjust the screen size enough to trigger the mobile menu, and scroll down a little until it sticks you will see what I'm referring to about taking up the full height, I made it green now so it was easier to see.
Then on it appears to fix itself, but when you scroll down it all the way aligned to the right. For this one would my best solution be margin-right 30:px; to match how it looks before scrolling
Try this selector for your existing CSS:
.main-navigation .menu-toggle
Getting closer, however two things.
1). @ 1232px please look at the mobile menu, it takes up the full height of the navigation. This is after you scroll down it looks fine before that.
2). Mobile - Looks great before I scroll down, once I scroll down it shifts all the way to the right, almost like the container it's in is different, I didn't know if adding margin-right would be a good fix.
Try this CSS:
#sticky-navigation .menu-toggle {
margin-right: 30px;
}That worked great for item #2 now I'm just trying to figure out #1
Can you go to customizer > layout > primary navigation and reduce the menu item height?
Let me know if that works.
What should I change it to in order to achieve a similar look?
Try something like this:
.sticky-navigation-transition .menu-toggle {
line-height: 60px;
}