Mobile menu right and logo left

This topic has 15 replies, 2 voices, and was last updated 5 years, 8 months ago by David.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
November 11, 2015 at 2:12 pm #152279

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.

November 11, 2015 at 11:37 pm #152334

Tom
Lead Developer
Lead Developer

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 🙂

November 12, 2015 at 1:24 am #152358

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

November 12, 2015 at 10:44 am #152457
Tom
Lead Developer
Lead Developer
Give this CSS a try:
```
@media (max-width: 768px) {
    .nav-float-right .main-navigation {
        float: right;
    }
    .nav-float-right .site-logo {
        float: left;
    }
}
```
November 13, 2015 at 12:37 am #152605

Markku

Thank you Tom! This makes the trick!

November 13, 2015 at 9:56 am #152729

Tom
Lead Developer
Lead Developer

You’re welcome 🙂

November 30, 2015 at 1:22 pm #156865

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!!

November 30, 2015 at 3:22 pm #156894
Tom
Lead Developer
Lead Developer
Give this a shot:
```
@media (max-width: 768px) {
    .sticky-menu-logo .main-navigation.navigation-clone .menu-toggle {
        float: left;
    }
}
```
December 1, 2015 at 6:34 am #157039

Heath

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

http://www.dadkingdom.com

December 1, 2015 at 10:00 am #157092

Tom
Lead Developer
Lead Developer

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

Thanks!

December 1, 2015 at 10:17 am #157095

Heath

Like a boss.

December 1, 2015 at 10:29 am #157096

Tom
Lead Developer
Lead Developer

That’s what I like to hear 🙂

January 26, 2016 at 4:29 pm #168246

Mosche

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

Thank you!

January 26, 2016 at 6:22 pm #168248

Tom
Lead Developer
Lead Developer

Glad it helped! 🙂

August 3, 2020 at 2:59 am #1385481

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