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

zacharymurri
Visitor
3 0 0

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.

Replies 3 (3)

themecaster
Excursionist
30 10 19

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

 

<style>.site-header__menu{display:inline-block !important;}#AccessibleNav{display:none !important;}</style>

 


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:

 

<div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-half{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">

 

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 

 

<nav class="mobile-nav-wrapper critical-hidden" role="navigation">

 

 

.

 

 

 

 

If my response was helpful please Like and Mark As Solution.

themecaster
Excursionist
30 10 19

Here's a solution:

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

Add styles theme.liquid line 62

<style>.site-header__menu{display:inline-block !important;}#AccessibleNav{display:none !important;}</style>

 

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 

<div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-half{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">

 

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

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

<nav class="mobile-nav-wrapper critical-hidden" role="navigation">

 

 

If my response was helpful please Like and Mark As Solution.
Sabine2
Visitor
1 0 0

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