How to force Mobile Menu to display on Desktop - Minimal theme

Technical Q&A
1

Hello, I am looking for a way to make the mobile (hamburger) navigation menu display at all times instead of it switching between the normal desktop menu at larger browser sizes.
I expect this will require me to alter the media queries but cannot locate where to do this.

Bonus points if you can point me in the right direction to then modify the location of the menu on my site as i will be attempting this next

Thanks in advance.

2

Here’s a simple solution that enables the mobile menu for all screen sizes.

Step1. Add css to make the mobile (hamburger) menu always visible and hide the default nav

add the following style to line 62 of theme.liquid

Step 2. Update the size of the nav grid items from medium-up–one-quarter to medium-up–one-half

update line 62 in header.liquid to the following:

{%- assign logo_classes = 'medium-up--one-half logo-align--left' -%}

update line 111 in header.liquid to the following:

Note that this step would be slightly different if the logo is centered in the nav.

Step 3. make sure the mobile nav menu isn’t hidden on larger screens

remove the class medium-up–hide from the mobile nav menu on line 153 of header.liquid


.
3

Here’s a solution:

Step 1. Show hamburger menu for all screen sizes and hide the default menu

Add styles theme.liquid line 62

Step 2. Resize the logo grid item

Change medium-up–one-quarter to medium-up–one-half on line 62 of header.liquid

{%- assign logo_classes = 'medium-up--one-half logo-align--left' -%}

Step 3. Resize icons grid item

Change medium-up–one-quarter to medium-up–one-half on line 62 of header.liquid

Step 4. Ensure mobile nav menu is not hidden on all screen sizes

Remove medium-up–hide from line 153 on header.liquid

4

Would there be a solution for Prestige as well?

(should say I am new and not an experienced coder)

would be great to get some help.

Thanks Sabine