[Support request] Move Hamburger for off canvas from right to left of logo

[Dominic]

Sorry I’m sure this is simple, searched on forum but can’t find.

I have the off canvas menu set (no primary menu at top, set to blank).
Currently the hamburger is far left, i’d like it to be far left, left of the logo.

Thanks!

[David]

Hi there,

can you share a link to your site that has the header setup with the off canvas burger to the right ? once i see the layout i can provide the necessary CSS

[Dominic]

Thanks David! https://www.familybreakfinder.co.uk/

[David]

So theres a couple of steps:

1. Add this PHP Snippet – this will make sure the Search Icon stays put:

https://generatepress.com/forums/topic/re-menu-not-displaying-properly/#post-1793602

2. Then this CSS to move the toggle to the left of the logo:

.main-navigation .menu-bar-items,
#mobile-header .menu-toggle {
    order: -1;
}
#mobile-header .menu-toggle {
    padding-left: 20px;
}

[Dominic]

Thanks very much David.

The search icon is now between the hamburger and logo – I added the PHP snippet.

Any way to get the search icon to stay on the right?

Thanks!

[Elvin]

Hi Dominic,

Any way to get the search icon to stay on the right?

Will this be for mobile only?

If yes, modify this custom CSS on your site –

.main-navigation .menu-bar-items, #mobile-header .menu-toggle {
    order: -1;
}

Wrap it on a @media rule so it only applies to desktop. (effectively exempting mobile)

@media (max-width:768px){
.main-navigation .menu-bar-items, #mobile-header .menu-toggle {
    order: -1;
}
}

Or remove it completely if you want the desktop to be on the right side as well.

[Author]

Posts