How do I align search and cart with the menu in the dawn theme?

[Rimagaradah]

I’d like to move the search and cart to the same line as the menu on the right side of my online store in the dawn theme please. 

[Dan-From-Ryviu]

Hi @Rimagaradah 

Please drop your store link to check please.

[Rimagaradah]

https://admin.shopify.com/store/314169-3/themes/122120732766/editor

can i move the menu to the right side and have the search and cart next to it 

[Dan-From-Ryviu]

Your store has password protected

[Rimagaradah]

Just removed the password 

[Dan-From-Ryviu]

Please add this code at bottom of your base.css file in Online store > Themes > Edit code 

.header { grid-template-areas: "heading icons" !important; }
@media screen and (max-width: 989px) {
.header--mobile-left {
    grid-template-columns: auto 3fr 1fr !important;
}
}
header-drawer { justify-self: end !important; }

 

[Rimagaradah]

Could I have the menu in the mega menu style not the drawer please 

[Rimagaradah]

& could I actually take out the search option & just move the cart next to the about on the right side 

[Dan-From-Ryviu]

Do you want to it appears like this? 

[Rimagaradah]

Yes but could you remove the search option & move the Arabic writing right next to the “W84IT” not underneath it please 

[Dan-From-Ryviu]

Please add this code at the bottom of your base.css file 

header-drawer, .header__search { display: none; }
nav.header__inline-menu { display: block; }
.header { display: flex !important; justify-content: space-around; }

[Rimagaradah]

Am i supposed to be removing the previous codes? Or adding them all

[Dan-From-Ryviu]

Remove previous code and replace them with new ones

[Rimagaradah]

 

This is what it looks like for me. Could I remove the search option completely & move the “shop and about” section to the very right next to the cart please? 

[Dan-From-Ryviu]

Did you check in mobile device? 

[Rimagaradah]

sorry I didn’t know there was a difference between the desktop and mobile. 

[Dan-From-Ryviu]

So the change you are asking is for desktop?

[Rimagaradah]

Yes please 

[Dan-From-Ryviu]

Please remove all code, go to your Online store > Themes > Customize > Header, Desktop logo position > select Middle left, save your template then I can provide the new code

[Rimagaradah]

Okay I just did, could I have the mobile view look like this (everything centered) 

and the desktop view look like this, please

 

[Dan-From-Ryviu]

Please remove previous code I sent you

[Rimagaradah]

Okay I did 

[Dan-From-Ryviu]

Please use this code and check now

.header__inline-menu {
    grid-area: icons !important;
    justify-self: end;
    margin-right: 40px;
}
.header__search { display: none !important; }

 

[Rimagaradah]

Perfect for the desktop view! 
how about the mobile view? 

[Rimagaradah]

is there any way to have the mobile view look like this image above? (the top image) thank you 

[Dan-From-Ryviu]

Hi @Rimagaradah 

Please add this code at bottom of your base.css file 

@media (max-width: 767px) {
header-drawer { 
    display: none !important; 
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
    justify-self: end !important;
    margin-right: -6px !important;
}
.header__inline-menu {
    margin-left: -268px;
    display: flex !important;
}
.header__icons {
    grid-area: navigation !important;
    margin-left: -228px !important;
}
.header__icons .header__search {
    display: none !important;
}
}

[Rimagaradah]

This is what the mobile view looks like now. How can I make it look like this: 

 

[Dan-From-Ryviu]

Did you add this code at the bottom of your base.css file? 

@media (max-width: 767px) {
header-drawer { 
    display: none !important; 
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
    justify-self: end !important;
    margin-right: -6px !important;
}
.header__inline-menu {
    margin-left: -268px;
    display: flex !important;
}
.header__icons {
    grid-area: navigation !important;
    margin-left: -228px !important;
}
.header__icons .header__search {
    display: none !important;
}
}

[Dan-From-Ryviu]

You missing close tag of previous code in your base.css file, please add } before my code to make it work

[Rimagaradah]

Yes, that worked thank you! Can I move the "shop and about" to the right side for both desktop and mobile view?

[Dan-From-Ryviu]

Do you mean to switch positions of Shop and About?

[Rimagaradah]

No, I mean to slide them both to the right more (next to the cart symbol) on both desktop and mobile views, please. Also can we get rid of the search option on the desktop view please? 

[Dan-From-Ryviu]

Did you remove the previous code I sent above for the desktop? 

[Rimagaradah]

Yes but i just added it back and it fixed the desktop view but this is how the mobile view looks now:

[Dan-From-Ryviu]

Please try to remove the code in base.css file, and then add code below to your theme.liquid file before </head> tag instead 

<style>
.header__inline-menu {
    grid-area: icons !important;
    justify-self: end;
    margin-right: 40px;
    margin-top: 100p;
}
.header__search { display: none !important; }
@media (max-width: 767px) {
header-drawer { 
    display: none !important; 
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
    justify-self: end !important;
    margin-right: -6px !important;
}
.header__inline-menu {
    margin-left: -268px;
    display: flex !important;
    /* margin-top: 92px; */
    grid-area: navigation !important;
}
.header__icons {
    grid-area: navigation !important;
    margin-left: -228px !important;
}
.header__icons .header__search {
    display: none !important;
}
}
</style>

[Rimagaradah]

Perfect that worked! It now looks like this for mobile view. Could I move the “shop, about and cart” to the center, right under the heading please. Thank you! 

 

[Dan-From-Ryviu]

Code updated

<style>
.header__inline-menu {
    grid-area: icons !important;
    justify-self: end;
    margin-right: 40px;
    margin-top: 100p;
}
.header__search { display: none !important; }
@media (max-width: 767px) {
header-drawer { 
    display: none !important; 
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
    justify-self: end !important;
    margin-right: -6px !important;
}
.header__inline-menu {
    margin-left: -340px;
    display: flex !important;
    grid-area: navigation !important;
    justify-self: center !important;
}
.header__icons {
    grid-area: navigation !important;
    margin-left: -220px !important;
    justify-self: center !important;
}
.header__icons .header__search {
    display: none !important;
}
}
</style>

[Rimagaradah]

Perfect, thank you! Is there any way we can equalize the spacing between the "about" "shop" and the cart symbol in the mobile view, please? But still have it be centered. Thank you

[Dan-From-Ryviu]

Please update code 

<style>
.header__inline-menu {
    grid-area: icons !important;
    justify-self: end;
    margin-right: 40px;
    margin-top: 100p;
}
.header__search { display: none !important; }
@media (max-width: 767px) {
header-drawer { 
    display: none !important; 
}
.header--mobile-left .header__heading, .header--mobile-left .header__heading-link {
    justify-self: end !important;
    margin-right: -6px !important;
}
.header__inline-menu {
    margin-left: -360px;
    display: flex !important;
    grid-area: navigation !important;
    justify-self: center !important;
}
.header__icons {
    grid-area: navigation !important;
    margin-left: -214px !important;
    justify-self: center !important;
}
.header__icons .header__search {
    display: none !important;
}
}
</style>

[Rimagaradah]

Perfect, thank you so much! How can I change the font size of my heading?

[Dan-From-Ryviu]

Do you mean change font size of your logo heading? 

[Rimagaradah]

yes 

[Dan-From-Ryviu]

Please add this code to previous code 

.header__heading-link .h2 {
font-size: 28px;
}

[Rimagaradah · Accepted solution]

Thank you!

[Dan-From-Ryviu]

Very welcome