How can I customize the menu drawer in Dawn theme?

[michael251]

Hello everyone! I am currently in the process of customizing Shopify’s Dawn theme and am seeking assistance with redesigning my menu drawer. The default menu drawer does not cover the header when it opens, and I would like to change this. Specifically, I would like the header to be covered when the drawer is opened, similar to how my cart drawer works.

Any help is greatly appreciated. Thank you!

Url: https://meezy-luxury.myshopify.com/

Password: myze23

Example of what I’m going for below.

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > Assets > base.css and add those CSS code at the bottom

.header__icon--menu .icon-close { top: 15px; right: 55px; z-index: 9; }
.menu-drawer { top: 0px !important; }

[irene-vintage]

Hello @michael251 ,

To do this, you can try to:

• Go to Online Store → Theme → Actions → Edit Code

• Go to “Sections” file → locate the HTML element that contains the header content. This is usually a div element with a class name of header.
• Add a new class to the header div element. For example, you can name the new class header–fixed to indicate that the header is fixed in position. Your code should look something like this:

• Go to "Templates’ file → locate the file that contains the drawer menu code. This could be in the drawer.liquid file or cart-drawer.liquid
• In the drawer menu file, locate the HTML element that contains the drawer menu content. This is usually a div element with a class name of drawer.
• Add a new CSS class to the drawer div element. For example, you can name the new class drawer–fixed to indicate that the drawer is fixed in position. Your code should look something like this:

• Add the following CSS code to your theme’s stylesheet:

.drawer--fixed {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1000; /* or higher than the header's z-index */
   overflow: auto;
}

.header--fixed {
   z-index: 999; /* lower than the drawer's z-index */
}

Save and preview.

Hope this can work.

Regards,

Ali Reviews team

[PageFly-Victor]

Hi [email removed]Michael251,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
.section-header.shopify-section-group-header-group{
z-index:4 !important
}
.no-js details[open]>.menu-drawer, .js details[open].menu-opening>.menu-drawer{
    transform: translate(0px, -50px) !important;
    height: calc(100vh + 5px)!important;
}
.header__icon--menu .icon{
top:-30px !important
}
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[GemPages]

Hi @michael251
I would like to give you a solution.

1. Go to Online Store → Theme → Edit code. https://prnt.sc/js2u9lX4TESb

2. Open your base.css in the Assets folder.

3. Paste the below code at the end of the file.

@media(max-width:767px){
#shopify-section-sections--18331178271001__header{
 z-index: 7 !important;
}
#menu-drawer{
    position: fixed;
    top:0;
    min-height: 100vh;
}
#menu-drawer .menu-drawer__navigation{
      padding: 4rem 0;
}
header-drawer .header__icon--menu .icon-close{
    position: fixed;
    top: 15px;
    right: 55px;
    z-index: 9;
}
header-drawer .header__icon--menu[aria-expanded=true]:before{
    position: fixed;
    height: 100vh;
    z-index: 3;
    top: 0;
}
}

Best regards,
GemPages Support Team

[michael251]

Thank you! You’re awesome.

[michael251]

Thank you, Dan!

[michael251]

Thank you! I appreciate it!

[michael251]

Thank you, Victor!!

[GemPages]

I am so glad that my solution can help .

[HELDERWRLD]

Hello @GemPages Do you know how can i make my menu open only halfway and not the full screen like his?

Here’s my website: https://diversusoficialsite.myshopify.com/

pass: diversusoficial

[spibee]

Hello micheal is myzee archive website your website ? if you have this website can you send me your theme esspecially zip file ı have to solution this problem if you help me ı will very happy thank you so much have a good day :))