Drawer menu overlayed by sections on all the pages - customised dawn theme

Solved

Drawer menu overlayed by sections on all the pages - customised dawn theme

GM15
Excursionist
28 1 1

Hello, 

As you can see on the. screenshot below, my drawer menu is being overlayed by the sections or elements of the pages. This happens on all the pages except the homepage where there is a video background. the menu already have a z-index of 9999 so not sure how to fix it. Also the blur effect of the background of the menu works only for the top part. Thanks for you help.

Screenshot 2024-06-13 at 09.21.38.png

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

This is an accepted solution.

Please add this code to theme.liquid file, after <head> and save the file to solve the issue

<style>
.section-header { z-index: 99; }
</style>

Screenshot 2024-06-13 at 16.17.29.png

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

This is an accepted solution.

Please add this code to solve the issue

<style>
.menu-drawer li.list-social__item { display: inline-flex; }
.menu-drawer .list-social__link .icon { width: 2.4rem; height: 2.4rem; }
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 22 (22)

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

Hi @GM15 

Sure, could you please share the URL of your store so I can take a look?

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

PageFly-Noah
Shopify Partner
1317 233 268

This is Noah from PageFly - Shopify Page Builder App

Hi @GM15 I can help you. Please can you provide the website url. Thank you.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

GM15
Excursionist
28 1 1
PageFly-Noah
Shopify Partner
1317 233 268

Hi @GM15 Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body> or above tag </head>

 

<style>
  main{
     z-index: -1 !important;
  }
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

GM15
Excursionist
28 1 1

GM15
Excursionist
28 1 1

Hello, this is my page

Website : https://a91d87-c1.myshopify.com/password

Pswd: Password25!

Thanks 

Moeed
Shopify Partner
4320 1110 1361

Hey @GM15 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
section#shopify-section-template--17337092964549__form {
    z-index: -1 !important;
    position: relative;
}
</style>

RESULT:

Moeed_0-1718268787993.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
GM15
Excursionist
28 1 1

Hello Moeed,

Thanks for your reply unfortunately, I idid paste the code provided juste above </body> tag in theme.liquid but I still have the same issue.

Not sure how you managed to make it works.

thanks

 

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

This is an accepted solution.

Please add this code to theme.liquid file, after <head> and save the file to solve the issue

<style>
.section-header { z-index: 99; }
</style>

Screenshot 2024-06-13 at 16.17.29.png

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
28 1 1

Thanks a lot, it is working! 

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

You are welcome. 

Best regards,

Dan from Ryviu

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
28 1 1

Hi Dan, 

Also another error you might be able to help with, the social button at the bottom of the drawer menu only appears if the footer section is visible. any reason for that ?

Thanks

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

Could you explain a little more about your question?

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
28 1 1

so when I switch the footer visibility to off, then the social icon from the drawer menu are removed.

 

Screenshot 2024-06-13 at 10.30.27.png

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

Could you try to disable footer so I can check?

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
28 1 1

done, you can have a look.

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

This is an accepted solution.

Please add this code to solve the issue

<style>
.menu-drawer li.list-social__item { display: inline-flex; }
.menu-drawer .list-social__link .icon { width: 2.4rem; height: 2.4rem; }
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
28 1 1

should i put this in theme.liquid, in <head> section again ? thanks.

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

Correct

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
28 1 1

And lastly, the drawer menu animation is not working anymore? i want a smooth opening animation from the left side. Could you please help with that too.

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

Hi @GM15 

Please add this code to theme.liquid 

<style>
.menu-drawer {
transition: transform var(--duration-default) ease, visibility var(--duration-default) ease !important;
}
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
28 1 1

Hi @Dan-From-Ryviu , thank for your help.

I put this code just after the <head> in the theme.liquid put the menu still just pop up.