[Resolved] Mobile menu right and logo left

[Markku]

Hi,

I’m trying to achieve scenario 3 (see the image) where the logo is left hand side and hamburger menu right. This is the same as generatepress.com site has in mobile view. But I’m only getting the logo and menu centered.

[img]http://aijaa.com/rALDGB[/img]
http://aijaa.com/rALDGB

I found an old topic with instructions to add extra functions but no success. I also tried to play with css but no luck so far. Any help is appreciated.

[Tom]

Hi there,

Someone else brought this up the other day: https://generatepress.com/forums/topic/mobile-header-navigation/#post-151723

I’ve started working on an update where this will happen by default if you navigation is set to float to the right.

If you’d like to link me to your site I may be able to give you some CSS for now though.

Let me know 🙂

[Markku]

Hi Tom,

I appreciate your help with modified CSS in the meantime. I just emailed the credentials for the site via contact form as the site is still unpublished.

Markku

[Tom]

Give this CSS a try:

@media (max-width: 768px) {
    .nav-float-right .main-navigation {
        float: right;
    }
    .nav-float-right .site-logo {
        float: left;
    }
}

[Markku]

Thank you Tom! This makes the trick!

[Tom]

You’re welcome 🙂

[Heath]

So, I actually have the opposite problem.

My MOBILE menu nav-burger starts out on the left, then when I scroll down to my sticky menu the nav-burger appears on the right next to my social icons. I’d prefer the menu stay on the left, next to the logo (logo on sticky menu only). I don’t recall this being a problem until one of the recent GP updates.
http://www.dadkingdom.com

I tried this, but it messed everything up:

@media (max-width: 768px) {
.main-navigation {
float: left;
}

As always, thank you so much Tom!!

[Tom]

Give this a shot:

@media (max-width: 768px) {
    .sticky-menu-logo .main-navigation.navigation-clone .menu-toggle {
        float: left;
    }
}

[Heath]

Nope. 🙁 It’s still stacked to the right. But, only on the sticky navigation.

http://www.dadkingdom.com

[Tom]

I just edited the code above, can you give it a try?

Thanks!

[Heath]

Like a boss.

[Tom]

That’s what I like to hear 🙂

[Mosche]

Oh wow!
I’ve been looking for this solution too.
Glad I found it.

Thank you!

[Tom]

Glad it helped! 🙂

[Torsten]

Hi Tom,
with the above code I tried to set the hamburger menu to the right for mobile and tablet, can’t get it to work…
Could you please take a look at https://bit.ly/2PpWTkV ?
Thanks ahead,
Torsten

[Author]

Posts