Site logo

Archived topic

Mobile Hamburger Menu

17 replies · Started by Paul on April 1, 2023

Viewing posts 16–18 of 18

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;
}
This archived topic is closed to new replies.