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>

Thanks for the reply, I've made the mobile header sticky.

How can I have it exactly like this.

1
2

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.

Okay, it's done I've set the style as an overlay. I've assigned a menu to the off-canvas menu, but still nothing is visible both overlay and the primary navigation drop-down still work in the mobile menu.

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 ?

It's code I've added at the starting stage of website, removed that now. what's next?

Hi Paul,

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

I want the hamburger icon to be sticky with a different color circle background and top bar should not be sticky. I want this to be only in mobile and not in desktop.

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;
}

I've added the code, nothing has changed, and everything remains the same.

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

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

Thanks the code is working now, but there is a line coming under the header while scrolling.

Border line appear while scrolling

I need few more things to achieve.

1. The hamburger color has to be white inside the background.
2. While scrolling back to the top the site icon disappears.
Like This
3. I need the site logo to be centered and the search icon to be inside the overlay.

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.

2. the logo will only re-appear when the page is fully scrolled to the top.

this is not happening, still, the logo is not visible while scrolling back to the top.

Okay, will start a separate topic on the other points.