Move Hamburger for off canvas from right to left of logo

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

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

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

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!

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.