ave main menu expanded by default on mobile on debut theme

Solved
Luke89
Tourist
4 0 1

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

 

 

jScreenshot (2).pngScreenshot (3).png

KetanKumar
Shopify Partner
14455 1676 5202

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Luke89
Tourist
4 0 1

Thank you for your time

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

0 Likes
Luke89
Tourist
4 0 1

Thank you for your time

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

0 Likes
squadkin
Excursionist
11 4 3

This is an 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 :

Screenshot_2.png

 

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
Tourist
4 0 1

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

0 Likes