Solved

Can you display the burger menu on desktop in Shopify?

Armeet
Visitor
2 0 1

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

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 13 (13)

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Armeet
Visitor
2 0 1

Worked perfectly! Thank you so much @dmwwebartisan!

dmwwebartisan
Shopify Partner
12282 2546 3694

@Armeet 

If helpful then please Like Solution

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
casery
Visitor
1 0 0

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
Visitor
1 0 0

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
Excursionist
20 0 7

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
Shopify Partner
12282 2546 3694

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Prarthana
Excursionist
20 0 7

thank you so much!!

Prarthana
Excursionist
20 0 7

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.   

Screenshot 2023-04-24 at 9.22.16 PM.png

Screenshot 2023-04-24 at 9.22.25 PM.png

dmwwebartisan
Shopify Partner
12282 2546 3694

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Prarthana
Excursionist
20 0 7

thank you soooo much!!

AIDA-AIDA
Visitor
1 0 0

A Genius 😍🎉

TheNappyMarket
Visitor
2 0 0

Hi, thank you for this solution- I used it on my dawn theme too and it worked. However I would like the Hamburger menu to be different to the Top horizontal menu ? Is this possible? Thanks