Help: Constant Burger Menu On Desktop (Dawn Theme)

[LucasLynch]

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! 

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

[dmwwebartisan]

@LucasLynch 

Please share your store preview URL.

Thanks!

[LucasLynch]

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

Thank you very much for your quick response!

[dmwwebartisan]

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

[LucasLynch]

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

It looks like this now. 

And it's supposed to look something like this

Is there a solution for this? 

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

[dmwwebartisan · 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;}
}

[LucasLynch]

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]

Is that possible, and if so how? 🙂 

[Alett_Lewis]

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]

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

[lameczla]

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

[jessicacarlson8]

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]

I am using Dawn 7.0.1

[woldsta]

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!