What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: 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
33 1 2

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
10341 2054 2137

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! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
10341 2054 2137

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! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 22 (22)

Dan-From-Ryviu
Shopify Partner
10341 2054 2137

Hi @GM15 

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

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PageFly-Noah
Shopify Partner
1317 233 277

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
33 1 2
PageFly-Noah
Shopify Partner
1317 233 277

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
33 1 2

GM15
Excursionist
33 1 2

Hello, this is my page

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

Pswd: Password25!

Thanks 

Moeed
Shopify Partner
6367 1725 2088

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

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


GM15
Excursionist
33 1 2

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
10341 2054 2137

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! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
33 1 2

Thanks a lot, it is working! 

Dan-From-Ryviu
Shopify Partner
10341 2054 2137

You are welcome. 

Best regards,

Dan from Ryviu

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
33 1 2

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
10341 2054 2137

Could you explain a little more about your question?

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
33 1 2

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
10341 2054 2137

Could you try to disable footer so I can check?

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
33 1 2

done, you can have a look.

Dan-From-Ryviu
Shopify Partner
10341 2054 2137

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! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
33 1 2

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

Dan-From-Ryviu
Shopify Partner
10341 2054 2137

Correct

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
33 1 2

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
10341 2054 2137

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! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

GM15
Excursionist
33 1 2

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.