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

GM15 · ‎06-13-2024

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.

Dan-From-Ryviu · ‎06-13-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎06-13-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎06-13-2024

Hi @GM15

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

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

PageFly-Noah · ‎06-13-2024

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 · ‎06-13-2024

website : https://a91d87-c1.myshopify.com/collections/frontpage

password : Password25!

PageFly-Noah · ‎06-13-2024

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 · ‎06-13-2024

site : https://a91d87-c1.myshopify.com/collections/frontpage

password : Password25!

GM15 · ‎06-13-2024

Hello, this is my page

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

Pswd: Password25!

Thanks

Moeed · ‎06-13-2024

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:

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!

- Custom Design | Advanced Coding | Store Modifications

GM15 · ‎06-13-2024

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 · ‎06-13-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

GM15 · ‎06-13-2024

Thanks a lot, it is working!

Dan-From-Ryviu · ‎06-13-2024

You are welcome.

Best regards,

Dan from Ryviu

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

GM15 · ‎06-13-2024

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 · ‎06-13-2024

Could you explain a little more about your question?

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

GM15 · ‎06-13-2024

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

Dan-From-Ryviu · ‎06-13-2024

Could you try to disable footer so I can check?

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

GM15 · ‎06-13-2024

done, you can have a look.

Dan-From-Ryviu · ‎06-13-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

GM15 · ‎06-13-2024

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

Dan-From-Ryviu · ‎06-13-2024

Correct

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

GM15 · ‎06-13-2024

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 · ‎06-13-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

GM15 · ‎06-13-2024

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.

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

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

- Need a Shopify Specialist? Chat on WhatsApp ✅- Get a quick Shopify quote – Click here!- Custom Design | Advanced Coding | Store Modifications

Community Blog Articles

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications