- This topic has 9 replies, 2 voices, and was last updated 3 years ago by
Tom.
-
AuthorPosts
-
December 30, 2019 at 1:26 pm #1117868
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/CO6dwIHicI 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?
December 30, 2019 at 4:46 pm #1117954Tom
Lead DeveloperLead DeveloperHi 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-developmentDecember 31, 2019 at 7:07 am #1118457drew
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.
December 31, 2019 at 10:03 am #1118572Tom
Lead DeveloperLead DeveloperSo 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-developmentDecember 31, 2019 at 10:08 am #1118574drew
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.
December 31, 2019 at 7:16 pm #1118726Tom
Lead DeveloperLead DeveloperTo 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-developmentJanuary 2, 2020 at 6:39 am #1119760drew
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.
January 2, 2020 at 10:12 am #1120131Tom
Lead DeveloperLead DeveloperGive 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-developmentJanuary 2, 2020 at 10:16 am #1120137drew
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.
January 2, 2020 at 5:30 pm #1120446Tom
Lead DeveloperLead DeveloperAwesome, 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 -
AuthorPosts
- You must be logged in to reply to this topic.