ave main menu expanded by default on mobile on debut theme

[Luke89]

Currently on mobile the site displays as the first picture and I would like to display with the menu expanded as in the second photo.

What is the best way to achieve this the site is www.sleepybedsandfurniture.com.au

Thanks in advance

j

[KetanKumar]

@Luke89 

Sorry for facing this issue, it's my pleasure to help us.

let me know how do you like it so I will guide you.

[Luke89]

Thank you for your time

I would like the menu to be display extended like the second picture

[Luke89]

Thank you for your time

I would like the menu to be display extended like the second picture

[squadkin · Accepted solution]

Hello @Luke89  

There is two main ways to make this happen.

First:

you can overwrite the code with CSS to open the menu by default.

copy paste below code to make the menu open by default.

@media screen and (max-width:749px){
 /* this will overwrite the current CSS */ 

/* this code is to make mobile menu visible*/
 .mobile-nav-wrapper {
    display: block!important;
    transform: translateY(107px)!important;
    z-index: 999;
  }

/*this code is to make spacing that is generating by theme when menu open*/
  .page-container {
    transform: translate3d(0px, 384px, 0px)!important;
  }
}

Output :

Second:

you have to debug and the find the JS code and make some changes there to make menu open by default.

I prefer to follow the second way/genuine way for better User Experience. 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on support@squadkin.com regarding any help
Shopify Partner | Whatsapp : +91 6356 882 809

[Luke89]

Thank you I have never done any coding and just went with the first option it works well