[Resolved] Right side hamburger menu on desktop with centered logo

[Alex]

I’ve made the main navigation with centered logo look like in Split theme on my site. Can’t figure it out how to make the desktop version look like mobile with right hamburger. Increasing mobile menu breakpoint shifts the logo leftside.

[David]

Hi there,

little unclear on this – are you trying to display the Hamburger menu on desktop ( in place of the default desktop menu ) ?

[Alex]

Yes, I’m trying to apply hamburger on both desktop and mobile.

[David]

Simplest option is to increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation, in the field type a large number eg. 6000px. This will force the mobile header to be always displayed.

Then you can replace your center logo CSS with this:

/* Centet mobile header logo */
#mobile-header {
    position: relative;
}
#mobile-header .navigation-branding {
    margin: unset;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}
/* Position hamburger on right of screen */
#mobile-header .menu-toggle {
    margin-left: auto;
}

[Alex]

Thanks for your support, David!

[David]

You’re welcome

[Author]

Posts