[Resolved] Moving hamburger icon to the left of logo on mobile

[Charles]

My client wants the hamburger menu (and icon) to be the left of the header logo on mobile. I don’t see an easy way to switch that in Generate Press or in the premium plug-in. I’ve read quite a few threads in the support forums.

The dev site is here.

I’m also trying to float a phone call icon on the other side of the header logo. I tried to set this up in the header widget, but it didn’t display on mobile. Currently, I’ve set up as a hook in elements.

The other issue with these two elements is that the header logo isn’t staying centered. Are there some recommended configurations in the Customize dashboard or do I need to tweak CSS?

THanks

[Tom]

Hi there,

Give this CSS a shot:

#mobile-header.has-branding .menu-toggle {
    order: -5;
    padding-left: 20px;
}

#mobile-header .mobile-phone-icon {
    order: 1;
    padding-right: 20px;
}

.site-logo.mobile-header-logo {
    margin-left: auto;
}

Let me know 🙂

[Charles]

Thanks! That worked!

I really love Generate Press right now. Using it as the go-to theme for all of my new client website projects. And I’ve been a web developer for almost 25 years. Keep up the excellent work!

[Tom]

Thank you! Glad you’re enjoying it 🙂

[Author]

Posts