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

Store Design
1

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

2

@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;}
3

Thank you!

4

@dashawerise

its my pleasure to help us

5

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.

Screen Shot 2021-11-11 at 8.21.11 AM.png
Screen Shot 2021-11-11 at 8.21.11 AM.png1300Ă—502 72.4 KB

6

@connorbcarroll

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

7

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

Please let me know if you need anything further!

Thanks,

Connor

8

@connorbcarroll

thanks but your store is password protected

9

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

Connor

10

@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;}
}
11

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

12

@connorbcarroll

yes please add this code

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

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.

14

@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;}
}
15

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

16

@Roheel

yes, please share store url

17

IT WORKED THANK YOU!

18

@ChrisReactive

wow that would be great

19

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

20

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 */
}
}