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

Solved
dashawerise
Excursionist
14 0 10

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

Accepted Solution (1)
KetanKumar
Shopify Partner
36589 3628 11811

This is an 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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 39 (39)
KetanKumar
Shopify Partner
36589 3628 11811

This is an 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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dashawerise
Excursionist
14 0 10

Thank you! 

KetanKumar
Shopify Partner
36589 3628 11811

@dashawerise 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
connorbcarroll
Tourist
4 0 4

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

KetanKumar
Shopify Partner
36589 3628 11811

@connorbcarroll 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
connorbcarroll
Tourist
4 0 4

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
Shopify Partner
36589 3628 11811

@connorbcarroll 

thanks but your store is password protected

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
connorbcarroll
Tourist
4 0 4

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

 

Connor 

KetanKumar
Shopify Partner
36589 3628 11811

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
connorbcarroll
Tourist
4 0 4

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
Shopify Partner
36589 3628 11811

@connorbcarroll 

yes please add this code 

.site-header .wrapper {
    max-width: 100%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
danij
Tourist
4 0 1

I tried adding all these things and the menu still won't right align.

 

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

ChrisReactive
New Member
2 0 2

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
Shopify Partner
36589 3628 11811

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ChrisReactive
New Member
2 0 2

IT WORKED THANK YOU!

KetanKumar
Shopify Partner
36589 3628 11811

@ChrisReactive 

wow  that would be great 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
krboyle
New Member
1 0 0

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

nudehaven
Tourist
39 0 1

Hi! I have the dawn theme but unfortunately none of the codes above are working. My URL is nudehaven.myshopify.com I want my header menu on the far right side with logo still on the far left. I have a wishlist heart option on header so I don't know if this is why the codes aren't  working for me

Roheel
Tourist
5 0 1

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

KetanKumar
Shopify Partner
36589 3628 11811

@Roheel 

yes, please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Roheel
Tourist
5 0 1

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

Thimon
New Member
1 0 0

Hey @KetanKumar , using dawn theme 4.0, the code seems to be different. Pasted your code, nothing happened. Maybe you could help again, would be awesome! 

NomadExplorer
New Member
1 0 0

Hi, Im having an issue with the mobile layout. I would like to have the drop down menu on the far left next to the basket icon but there isn't an option I would also like to have the logo on the left can you help? website is : www.nomad-explorer.com

nicolasvanegasm
Tourist
3 0 3

Hi Katen i think that code don´t work on dawn 2.0, i put that code and nothing happens, any idea? Txs for your help

KetanKumar
Shopify Partner
36589 3628 11811

@nicolasvanegasm 

can you please send store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nicolasvanegasm
Tourist
3 0 3
KetanKumar
Shopify Partner
36589 3628 11811

@nicolasvanegasm 

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 {grid-template-columns: 1fr !important;}
}

Layout Preview After Code..

KetanKumar_0-1658950948301.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nicolasvanegasm
Tourist
3 0 3

Txs Ketan it works perfectly 

KetanKumar
Shopify Partner
36589 3628 11811

@nicolasvanegasm 

no rush its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
on-targit
Excursionist
13 1 5

Hi Ketan,

 

Is there a way to move ONLY the mobile version of the menu to the right side? I'm happy with the default PC setup, but the menu being on the left in mobile makes no sense. 

Luxury Designer and Fashion Apparel For Interdimensional Beings
KetanKumar
Shopify Partner
36589 3628 11811

@on-targit 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
on-targit
Excursionist
13 1 5

Thank you so much!

 

My URL is https://on-targit.com/

 

in the mobile version of my site I'd like to have the three lines menu in the top right instead of left. It's more intuitive to tap on the screen there especially if you have a large phone.

 

Again, thanks for looking into this for me!

Luxury Designer and Fashion Apparel For Interdimensional Beings
KetanKumar
Shopify Partner
36589 3628 11811

@on-targit 

thanks for details 

can you please confirm 

KetanKumar_0-1659934731456.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
on-targit
Excursionist
13 1 5

Yeah, how did you manage that? I see you editing the code using developer tools, but is this possible to pinpoint the mobile only code within the dawn theme? 

Luxury Designer and Fashion Apparel For Interdimensional Beings
Xndysnski
New Member
5 0 0

Code on this please? The header menu here is the way I want it. Thanks xx

okwhatever88
New Member
2 0 0

Hi my website is https://myrchshop.myshopify.com/
Im trying to push menu navigation to the right but the codes you have given does not work for me.
Please help 🙂

okwhatever88
New Member
2 0 0

i used your latest fix with "!important" and its now working thank you!
awesome as always!

repeak123
New Member
1 0 0

This did not work for me. Is there another solution by chance?

Xndysnski
New Member
5 0 0

Hi Ketan. Code is working, but when I checked the mobile placement, header menu went to the left instead of right. Can you help?