Mobile menu alignment between non-sticky and sticky

[drew]

I’ve noticed that when the mobile menu is set to sticky, the location of the hamburger menu on non-sticky is left, but on sticky, it moves to the right:

non-sticky: https://www.screencast.com/t/m6W6XmOWWy
sticky: https://www.screencast.com/t/CO6dwIHic

I assumed adjusting the non-sticky so it right aligns would be a straightforward change to the default float class. But that doesn’t seem to be the case 🙂

What’s the recommended way to get the hamburger menu right aligned across all versions on mobile?

[Tom]

Hi there,

We move the mobile toggle to the far right because that’s typically where your finger is used to going on mobile for the menu.

You can move it to the left with this CSS:

.main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    order: 1;
    margin-right: auto;
}

.navigation-branding {
    margin-right: 0;
}

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[drew]

That works but I probably wasn’t clear. I agree that it works best right-aligned and was looking to reorder the hamburger menu so it was also right aligned in non-sticky mode as well.

Having said that, this certainly works at keeping it aligned on the left in both sticky and non-sticky.

[Tom]

So would the “Book Now” be on the left?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[drew]

Yes, although modifying the Book Now button is easy enough since it’s a custom button set in place using the existing (and fabulous) mobile header hook. 🙂

I was planning on tweaking it as needed anyway.

[Tom]

To achieve that layout in the sticky nav, I would remove the CSS I provided above and do this:

.main-navigation.navigation-stick .mobile-bar-items {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.navigation-stick .mobile-bar-items .mobile-nav {
    margin-right: auto;
}

Non-sticky is different right now because the mobile header isn’t active.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[drew]

Closer. Here’s a mock-up of what I’m after: https://www.screencast.com/t/FMeoVQDgYa

The most important element is the menu hamburger icon remains far right across both states.

And I agree, using the mobile header would make this all easier and this client is a good example of one where their logo isn’t well-suited for mobile menu use (takes up too much space or end up reduced in size where the text is illegible). for a lot of Venture’s clients, this is a common design challenge and editing the logos isn’t an option.

If you think this crosses the threshold into taking too much effort to accomodate, then the first option is likely best as it keeps the menu on the left across both states.

[Tom]

Give this a shot:

.main-navigation .mobile-bar-items {
    order: 1;
}

.main-navigation .menu-toggle {
    order: 2;
    margin-left: auto;
    flex-grow: 0;
}

.nav-search-active + .mobile-bar-items .mobile-nav {
    opacity: 0;
}

.main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    margin-right: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[drew]

That’s working out perfectly Tom, thanks so much. I’m saving all of these options as snippets as I especially like the first option for users with logos that aren’t too big but still aren’t well suited for the mobile header option.

[Tom]

Awesome, glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts