Users are seeking to customize the Dawn theme header by moving the navigation menu to the right side while keeping the logo on the left. The default Dawn theme doesn’t offer this customization option natively.
Primary Solution (Desktop):
Add CSS code to base.css file:
.header--middle-left .header__inline-menu {text-align: right;}@media screen and (min-width: 990px) {.header--middle-left {grid-template-columns: 1fr !important;}}Mobile Version Solution:
For moving the hamburger menu icon to the right on mobile devices, a different CSS snippet is required that modifies grid template areas and header-drawer positioning.
Key Points:
Status: Ongoing support thread with working solutions provided for various Dawn theme versions and device types.
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
sorry for any issue can you try this code
.header--middle-left .header__inline-menu {text-align: right;}
Thank you!
its my pleasure to help us
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.
sorry for that issue can you please share store url so i will check and let you know
Hi - Thanks so much for the reply. The URL is https://volleyllamapickle.com.
Please let me know if you need anything further!
Thanks,
Connor
thanks but your store is password protected
@KetanKumar sorry about that - store is now live and un password protected. Thanks for taking a look.
Connor
yes please try this code
@media screen and (min-width: 990px) {
.header--middle-left {grid-template-columns: auto auto 0fr;}
}
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
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.
sorry for terrible that issue can you try this code
@media screen and (min-width: 990px) {
.header--middle-left .header__inline-menu {text-align: right;}
}
is there any way just move the logo center and keep the rest as default
yes, please share store url
IT WORKED THANK YOU!
wow that would be great
i have manage to do that, but thank you so much for your reply.
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 */
}
}