Left side hamburger menu on mobile

One thing we never got around to and caused some confusion after our work on Full height, slide out hamburger menu was that the hamburger menu, on the right side, opens a menu from the left side. For those interested in rearranging the header, this is for you:

Screenshot from 2020-09-18 12-19-27

Mobile menus appearing in the upper-left corner of the screen is not very reachable single-handedly which is why this is a standalone theme component. Options, yanno?

35 Likes

Very nice. Is it possible to extend the component and add the option for the logo to be in the middle of the bar when the menu icon is on the left? I think itā€™s the most logical way (speaking of ux).

4 Likes

Sure, Iā€™ve added a theme option for you to make the logo more centered - enjoy! :slight_smile:

Screenshot from 2020-09-21 09-57-37

Screenshot from 2020-09-21 09-56-45

9 Likes

Would it be possible to customise this for the desktop version as well ?

Thanks for the theme component @featheredtoast

1 Like

Iā€™d consider desktop out of scope for this particular theme component.

You could certainly do something similar for desktop if you were looking to reposition elements as adopting the same techniques I used here for desktop certainly wouldnā€™t be too difficult in a separate theme if youā€™ve got something in mind youā€™d like to do.

2 Likes

Thank you for the reply :slight_smile: I lack the skills to build one myself, but probably should be teaching myself those :wink:

It can be enabled only on tablet? Because that UX fits really good with tablets but not so much with mobile (a lot of people use their smartphones with one hand).

Lately this component has a bug, when I activate it, everything is misaligned, how can I fix it?
image

1 Like

This does not work. Since the hamburger button is already on the top-left corner on desktop, can we make it too on mobile UI in the core code? If not, what is the reason blocking this kind of unification of design.

1 Like

As weā€™ve had a couple of reports that this theme component isnā€™t currently working, Iā€™ve added the broken tag. :+1:

1 Like

As stated in OP:

menus on are on same side on mobile for single hand usability.

Thanks for pointing out something I have definitely missed reading. I understand. But can we make it configurable?
The idea is that some users with relatively small-sized mobile phones (eā€¦g. Pixel 7) may not have the reach ability issue and menu popping up from left is very unnatural. If at least something must appear at some corner, why couldnā€™t it be configured to be menu button (currently is site logo linking to homepage)?

Any news on when/if this will be fixed?

Apologies for the delay on this, @benji submitted a fix for this, let me know if there are any further issues

1 Like

Thanks so much @featheredtoast and @benji!

Just tried it, and unfortunately, it doesnā€™t seem to be playing well with this other theme-component I have installed:

See screenshot (chat icon moved to a 2nd row):

This is what it looks like with the ā€œLeft side hamburger menu on mobileā€ theme-component disabled:

Hope thatā€™s useful!

2 Likes

This is helpful; thank you! Iā€™m about done for the day but will make a note-to-self to check on this Monday. I think I know whatā€™s going on.

3 Likes

Happy Monday, @Robin.Grant! Just wanted to confirm that these screenshots were taken after downloading the update to the ā€œLeft sideā€ theme? Trying to recreate this locally now.

1 Like

Yup - 100%

1 Like

Pulled in a fix for this, many thanks @benji

Give it a whirl @Robin.Grant

2 Likes