Archived topic

Moving hamburger icon to the left of logo on mobile

3 replies · Started by Charles on August 20, 2019

Viewing posts 1–4 of 4

August 20, 2019 at 11:10 am #989118

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

August 20, 2019 at 5:22 pm #989300

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 :)

August 21, 2019 at 8:38 am #989856

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!

August 21, 2019 at 4:19 pm #990148

Thank you! Glad you're enjoying it :)

This archived topic is closed to new replies.

Start building better websites today.