Dawn theme: Move header menu to the right side. Keep logo on the left.

[dashawerise]

Hi there! For some reason, the Dawn theme does not allow customization of header menu placement. I would like it to be on the right side of the header, not the left. I would like to keep the logo on the left. Thanks! 

https://werise.co/?fts=0&key=9e4a665f68b2e32aba270b44acc2a8b1aeca3da267aa69b72db776da3a31951a

[KetanKumar · Accepted solution]

@dashawerise 

sorry for any issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.header--middle-left .header__inline-menu {text-align: right;}

[dashawerise]

Thank you! 

[KetanKumar]

@dashawerise 

its my pleasure to help us 

[connorbcarroll]

Hi There - I am trying to use the same code but am having trouble getting into to work with my Dawn theme. I have pasted at the very bottom of base.css but when I refresh, the menu items still are left aligned next to the logo. 

[KetanKumar]

@connorbcarroll 

sorry for that issue can you please share store url so i will check and let you  know

[connorbcarroll]

Hi - Thanks so much for the reply. The URL is https://volleyllamapickle.com. 

Please let me know if you need anything further!

Thanks, 

Connor 

[KetanKumar]

@connorbcarroll 

thanks but your store is password protected

[connorbcarroll]

@KetanKumar sorry about that - store is now live and un password protected. Thanks for taking a look. 

Connor 

[KetanKumar]

@connorbcarroll 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file.

@media screen and (min-width: 990px) {
.header--middle-left {grid-template-columns: auto auto 0fr;}
}

[connorbcarroll]

hi @KetanKumar thanks so much for this code - This brought my two menu items more centered on the page - Any suggestions to make the menu completely right-aligned (logo on the left still) on the header so they are right next to the search and checkout buttons?

Thanks again 

[KetanKumar]

@connorbcarroll 

yes please add this code 

.site-header .wrapper {
    max-width: 100%;
}

[ChrisReactive]

I'm trying to do the same thing, and the code doesn't work on my site. Why Shopify doesn't do this officially is beyond me imo. The default style is terrible UI/UX.

[KetanKumar]

@ChrisReactive 

sorry for terrible that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 990px) {
.header--middle-left .header__inline-menu {text-align: right;}
}

[Roheel]

is there any way just move the logo center and keep the rest as default

[KetanKumar]

@Roheel 

yes, please share store url

[ChrisReactive]

IT WORKED THANK YOU!

[KetanKumar]

@ChrisReactive 

wow  that would be great 

[Roheel]

i have manage to do that, but thank you so much for your reply.

[krboyle]

Hey @KetanKumar your help on this thread is amazing! 

Quick question - on the Dawn theme I am trying to move my logo a little to the left (it is currently left aligned, need to move it more to the left on larger screens). This is the code I tried adding to base.css and it didnt do anything, any suggestions? Much appreciated!

@media screen and (min-width: 750px) {
.logo-align--left {
position: relative;
left: 100px; /* change value as you like */
}
}