Mobile hamburger menu trubleshooting dawn theme (important)

Solved

Mobile hamburger menu trubleshooting dawn theme (important)

Sivadarshan
Shopify Partner
314 2 61

I am using Dawn theme latest version, in that mobile hamburger menu is doing some issue (when I click on the hamburger menu scrolls till the end of website until footer, let's say if we are in mid of the website and try to click hamburger menu it shows the bottom of hamburger menu) I'll attach the error drive link, website link and password. Please rectify the issue.

Error Link: https://drive.google.com/file/d/1XhIac_moPi5ahIRKctGhwC1NtkVBhs0v/view?usp=drive_link

Website Link: https://rugd-in.myshopify.com/

Password: rugged

Accepted Solution (1)

kevinkarma55
Shopify Partner
101 11 11

This is an accepted solution.

Hi Sivadarshan,

I believe you want to stop scrolling when naving is open right? (usually the pattern most websites use)?

If so follow these steps:

Go Online Store > Themes > Go to the theme you using> Click ... (three-dot) > Edit Code

Find a file name called base.css and find the following code: 

.overflow-hidden-mobile, .overflow-hidden-tablet, .overflow-hidden-desktop {
    overflow: hidden;
}

 next you need to add one new line making it look like following

.overflow-hidden-mobile, .overflow-hidden-tablet, .overflow-hidden-desktop {
    overflow: hidden;
    height: 100%;
}

 Save and checkout. Let me know

Please remember to Like & Mark Solution to the post if it helped you.
Thanks !
If you'd like to support me, you can Buy Me a Coffee
Need help with anything related to Frontend?
Checkout kevinkarma.me

View solution in original post

Reply 1 (1)

kevinkarma55
Shopify Partner
101 11 11

This is an accepted solution.

Hi Sivadarshan,

I believe you want to stop scrolling when naving is open right? (usually the pattern most websites use)?

If so follow these steps:

Go Online Store > Themes > Go to the theme you using> Click ... (three-dot) > Edit Code

Find a file name called base.css and find the following code: 

.overflow-hidden-mobile, .overflow-hidden-tablet, .overflow-hidden-desktop {
    overflow: hidden;
}

 next you need to add one new line making it look like following

.overflow-hidden-mobile, .overflow-hidden-tablet, .overflow-hidden-desktop {
    overflow: hidden;
    height: 100%;
}

 Save and checkout. Let me know

Please remember to Like & Mark Solution to the post if it helped you.
Thanks !
If you'd like to support me, you can Buy Me a Coffee
Need help with anything related to Frontend?
Checkout kevinkarma.me