Re: Movement of search and cart

Solved

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

Rimagaradah
Excursionist
27 1 1

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. 

Accepted Solution (1)
Rimagaradah
Excursionist
27 1 1

This is an accepted solution.

Replies 44 (44)

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

Hi @Rimagaradah 

Please drop your store link to check please.

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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
Shopify Partner
10106 2008 2060

Your store has password protected

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

Just removed the password 

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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

Screenshot 2023-11-14 at 09.47.01.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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

Rimagaradah
Excursionist
27 1 1

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

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

Do you want to it appears like this? Screenshot 2023-11-14 at 09.57.22.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

Remove previous code and replace them with new ones

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

IMG_5883.jpegThis 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
Shopify Partner
10106 2008 2060

Did you check in mobile device? 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

So the change you are asking is for desktop?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

Yes please 

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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

Screenshot 2023-11-14 at 10.37.04.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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

IMG_9994.jpeg

and the desktop view look like this, please

IMG_5885.jpeg

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

Please remove previous code I sent you

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

Okay I did 

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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

Screenshot 2023-11-14 at 11.16.44.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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

Rimagaradah
Excursionist
27 1 1

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

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

IMG_5894.jpeg

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

Rimagaradah_0-1700022056574.jpeg

 

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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

Screenshot 2023-11-15 at 11.24.48.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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
Shopify Partner
10106 2008 2060

Do you mean to switch positions of Shop and About?

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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
Shopify Partner
10106 2008 2060

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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

Rimagaradah_0-1700025284541.jpeg

 

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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>

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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! 

IMG_6062.jpeg

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

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>

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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
Shopify Partner
10106 2008 2060

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>

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

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

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

Do you mean change font size of your logo heading? 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

yes 

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

Please add this code to previous code 

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

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rimagaradah
Excursionist
27 1 1

This is an accepted solution.

Thank you!

Dan-From-Ryviu
Shopify Partner
10106 2008 2060

Very welcome

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.