- This topic has 9 replies, 2 voices, and was last updated 4 years, 3 months ago by Tom.
-
AuthorPosts
-
December 30, 2019 at 1:26 pm #1117868drew
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 #1117954TomLead 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 π
December 31, 2019 at 7:07 am #1118457drewThat 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 #1118572TomLead DeveloperLead DeveloperSo would the “Book Now” be on the left?
December 31, 2019 at 10:08 am #1118574drewYes, 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 #1118726TomLead 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.
January 2, 2020 at 6:39 am #1119760drewCloser. 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 #1120131TomLead 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; }
January 2, 2020 at 10:16 am #1120137drewThat’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 #1120446TomLead DeveloperLead DeveloperAwesome, glad I could help! π
-
AuthorPosts
- You must be logged in to reply to this topic.