Archived topic
Mobile Hamburger Menu
17 replies · Started by Paul on April 1, 2023
If thats the case then the script isn't detecting the header is no longer sticky. But it was never designed for this kind of thing.
If you want just the Hamburger to be the only sticky element then you will need to disable the mobile headers sticky option. And then we can provide some CSS to position: fix the hamburger. But it will be fixed scrolling down or up.
Let me know
can you please help me with the css part.
Ok
1. in Customizer > Layout > Header --> Mobile Header, disable the sticky header option.
2. remove the CSS i provided here:
https://generatepress.com/forums/topic/mobile-hamburger-menu/#post-2594371
3. Add this instead:
#mobile-header {
padding-right: 70px;
}
#mobile-header .menu-toggle {
padding: 0;
margin-right: 10px;
width: 50px;
height: 50px;
display: block;
background-color: #f00;
border-radius: 50px;
position: fixed;
right: 0;
top: 0;
}
#mobile-header .menu-toggle .icon-menu-bars {
position: relative;
top: -3px;
}