Dawn Burger Menu on Desktop

[Armeet]

I would like to display the burger menu on Dekstop too, similar to how it looks on mobile devices. My store URL is www.structshop.com and the password is "aipalu". 

[dmwwebartisan · Accepted solution]

@Armeet 

 Please follow these steps: - Step 1: Go to Online store > Themes > Actions > Edit code. - Step 2: Go to Assets >base.css and paste this at the bottom of the file.

@media screen and (min-width: 990px){
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {display: none !important;}
.header:not(.header--middle-left) .header__inline-menu { display: none !important;}
.header--top-center *>.header__search, .header:not(.header--top-center)>.header__search { display: inline-flex !important;}
header-drawer {display: block !important;}
}

Thanks!

[Armeet]

Worked perfectly! Thank you so much @dmwwebartisan!

[dmwwebartisan]

@Armeet 

If helpful then please Like Solution

[casery]

Thank you very much, this helped me to this on my own site (Dawn Theme), however on the desktop version i'd like it to say MENU next to the hamburger. Is that possible?

[decoengel]

Hello, @dmwwebartisan Thank you for that code, I had the same problem and it worked. I do have one question. When I open the menu, There is a white background that opens up in front of the page (view image attached). Is there a way to edit that in the code? I tried to edit the theme settings and it looks like it is attached with changing background 1 color (see attached) and there is no way to make it transparent as well as it changes other buttons and icons to one color. I am using the theme Craft. 

[Prarthana]

hi

my website is https://by-hala.com/

when I open the menu on desktop, the header is still visible. can we make the full bar white when the hamburger menu is clicked? I don't want the header behind it to be visible

[dmwwebartisan]

@Prarthana 

Please add the following CSS to your assets/base.css bottom of the file.

@media screen and (min-width: 990px){
.menu-open .header-wrapper {position: relative !important;}
.menu-open .header {width: 100% !important;background: #fff !important;}
}

Thanks!

[Prarthana]

thank you so much!!

[Prarthana]

hi,

thank you for the reply. but when I added the css, it opens properly but my header doesn't remain transparent. I want it to be transparent when I open the hamburger menu.   

[dmwwebartisan]

@Prarthana 

Please remove the previously provided CSS code.

Please add the following new CSS to your assets/base.css bottom of the file.

@media screen and (min-width: 990px){
.menu-open .header-wrapper {position: relative !important;}
.menu-open .header {width: 100% !important;background: transparent !important;}
.menu-open .header__icon--menu {position: relative !important;}
}

Thanks!

[Prarthana]

thank you soooo much!!

[AIDA-AIDA]

A Genius 😍🎉