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>

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎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>

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎06-13-2024

Hi @GM15

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

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎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 ✅

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

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎06-13-2024

Thanks a lot, it is working!

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

You are welcome.

Best regards,

Dan from Ryviu

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎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?

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎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?

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎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>

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎06-13-2024

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

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

Correct

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎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>

- Helpful? Like and Accept solution! or Buy me coffee
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 · ‎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 ✅- Custom Design | Advanced Coding | Store Modifications

Community Blog Articles

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Custom Design | Advanced Coding | Store Modifications