[Support request] Mobile Hamburger Menu

Hi there,

in Customizer > Layout > Header you have the Mobile header active, and it has a setting to make it sticky. Check that,
if you want to remove the logo and search on sticky let us know after you activated the stick, as it will require some CSS>

Ok, we’ll come back to 1.
For 2 you need to use the Off Canvas panel on mobile:

https://docs.generatepress.com/article/off-canvas-panel-overview/

Enable that.

Ok, you have some CSS that is setting the max-height to 0
It looks like:

@media (max-width: 768px) {
    .main-navigation .main-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height 500ms ease-out;
    }
}

Do you know where that is coming from ?

Hi Paul,

To clarify, should just the menu toggle be the one that’s sticky as well?

Try this CSS:

/* make menu toggle round 50px */
#mobile-header .menu-toggle {
    padding: 0;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    display: block;
    background-color: #f00;
    border-radius: 50px;
}

#mobile-header .menu-toggle .icon-menu-bars {
    position: relative;
    top: -3px;
}
/* hide all but the hamburger in sticky */
#mobile-header.is_stuck .inside-navigation  > :not(.menu-toggle){
    display: none;
}
#mobile-header.is_stuck .inside-navigation {
    justify-content: flex-end;
}
/* make sticky header background transparent */
#mobile-header.is_stuck {
    background: transparent;
}

The code isn’t working because of a missing closing bracket in your Additional CSS.

Before this /* make menu toggle round 50px */ add a }.

Add this CSS to remove the border below the sticky mobile header:

#mobile-header.is_stuck {
    box-shadow: unset;
}

1. In the first CSS rule i provided above, include the color: #fff; property so it becomes:

#mobile-header .menu-toggle {
    padding: 0;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    display: block;
    background-color: #f00;
    border-radius: 50px;
    color: #fff;
}

2. the logo will only re-appear when the page is fully scrolled to the top.
If thats not working for you, the most we could do is NOT use the Sticky mobile header and just use some CSS to “fix” the menu toggle. Let me know.

3. Can you raise a separate topic for this, it will allow us to focus better on each additional request.