Solved

Help: Constant Burger Menu On Desktop (Dawn Theme)

LucasLynch
Tourist
5 0 1

Hi Shopify-users, Store-owners, and Design-geeks! 

I'm quite new to Shopify and was hoping someone had a solution for a minor problem I am having regarding the design of my store. I'm overall happy with the new Dawn theme and believe it contains some awesome design features. I only have one problem, regarding the design of the main menu on the desktop. I would love for the main menu to look exactly like the mobile menu. I believe it looks a lot better! 

Does someone have a solution for this problem? 

Thanks for your time! 

LucasLynch_0-1634130170249.png

LucasLynch_1-1634130190739.png

 

I would like the second picture to be able to look like the first one! 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12303 2549 3702

This is an accepted solution.

@LucasLynch 

Remove previous css add this following new css.

1. In your Shopify Admin go to:  online store > themes > actions > edit code

2. Find  Asset > base.css and paste this at the bottom of the file.

@media screen and (min-width: 990px) {
header-drawer { display: block !important;}
.header--middle-left .header__inline-menu { margin-left: 0; display: none !important;}
.header__heading, .header__heading-link { justify-self: center !important; grid-area: initial !important;}
}
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
12303 2549 3702

@LucasLynch 

Please share your store preview URL.

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
LucasLynch
Tourist
5 0 1

https://alssund-risteriet.myshopify.com/

Thank you very much for your quick response!

dmwwebartisan
Shopify Partner
12303 2549 3702

@LucasLynch 

1. In your Shopify Admin go to:  online store > themes > actions > edit code

2. Find  Asset > base.css and paste this at the bottom of the file.

@media screen and (min-width: 990px) {
.header-drawer { display: block !important;}
.header--middle-left .header__inline-menu { margin-left: 0; display: none !important;}
.header__heading, .header__heading-link { justify-self: center !important; grid-area: initial !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
LucasLynch
Tourist
5 0 1

Hi. Some of it worked, but I still don't have a burgermenu to navigate! 

LucasLynch_0-1634131389552.png

It looks like this now. 

And it's supposed to look something like this

LucasLynch_1-1634131421287.png


Is there a solution for this? 

And thank you SO much for being so helpful, it's awesome!

dmwwebartisan
Shopify Partner
12303 2549 3702

This is an accepted solution.

@LucasLynch 

Remove previous css add this following new css.

1. In your Shopify Admin go to:  online store > themes > actions > edit code

2. Find  Asset > base.css and paste this at the bottom of the file.

@media screen and (min-width: 990px) {
header-drawer { display: block !important;}
.header--middle-left .header__inline-menu { margin-left: 0; display: none !important;}
.header__heading, .header__heading-link { justify-self: center !important; grid-area: initial !important;}
}
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
LucasLynch
Tourist
5 0 1

AWESOME! You are great, this actually worked. 

I have one last question, (I'll accept the earlier solution as the solution) but is it possible to move the logo more into the center? 

LucasLynch_0-1634132012466.png

 

LucasLynch
Tourist
5 0 1

Is that possible, and if so how? 🙂 

Alett_Lewis
Shopify Partner
4 0 1

This worked for me to keep the logo centered. In Base.css at the bottom of your css add:

 

 

.header {
display: grid;
grid-template-areas: 'left-icon heading icons';
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
}
OutlawzFood
Visitor
1 0 1

@Alett_Lewis is it possible to fix the header, when you scroll down? 

lameczla
Shopify Partner
6 0 0

have you managed to find this out? I have burger menu on desktop but when you scroll down it keeps beign opened

jessicacarlson8
Visitor
2 0 0

Hi,

I used to want the hamburger menu on desktop and spent months trying to figure it out. Then I realized that it completely threw off the dimensions of my website and that I no longer wanted a hamburger on my desktop. I tried reverse engineering by deleting any code that may have been added, but that did not work either. At least I wasn't able to figure it out because I forgot. Please help me restore the regular desktop menu. I am happy with the hamburger on mobile. I appreciate your help; thank you. Thank you for your time teaching us how to make the hamburger menu in the first place because it looks nice.

Thank you,
Jessica

jessicacarlson8
Visitor
2 0 0

I am using Dawn 7.0.1

woldsta
Visitor
1 0 0

Hi There,

 

I have a similar small problem, since a recent update the burger menu has appeared in my header. i would like to remove this from the header on the desktop version so the header height is more equal. (its also not needed with the main menu there already). i would however need to keep the burger menu on the mobile version to access the menu. 

 

Please see the attached image, any advice would be greatly appreciated.

Thanks for your time!

 

Screenshot 2024-05-08 at 22.59.58.png