Moving Shopping cart icon to Announcement Bar

Solved
HDB2021
Tourist
5 0 0

Hello! I would like to move my shopping cart icon to the Announcement bar, and shift my navigation menu all the way to the right. I am having trouble figuring out how to do this! Any help would be much appreciated!

 

https://fqk9mlu8897l7qka-60802269408.shopifypreview.com

PW: flengi

 

Header Markup.JPG

Accepted Solution (1)

Accepted Solutions
SidouLF
Excursionist
24 5 4

This is an accepted solution.

Hey @HDB2021 

 

Here is how you can move the menu to the right, go to Online store -> Actions -> Edit code and on the search field search this file base.css then on your keyboard click on Command+F (Ctrl+F on Windows) and input the following line of code and hit Enter.

.header--middle-left

 Now scroll down a bit and you should see the following CSS code 

.header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

 

If you want the menu to float to the right remove where it says auto auto 1fr and replace it with 1fr so it will look like this 

.header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: 1fr;
    column-gap: 2rem;
  }

 

However if you ever want it to be centered instead, then change it to 1fr auto 1fr so it will look like this

.header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

 

 

As for the cart, from a UI perspective, it's bad practice to make a cart hard to access/see for your potential customers so I advise you to leave it there

 

 

PS: For this to properly work you must have selected on the theme customizer Logo position on large screens -> Middle left

 

View solution in original post

Replies 5 (5)
Ollie
Shopify Staff
422 47 73

Hey @HDB2021.

 

Thanks for reaching out.

 

I appreciate that you have shared your online store and a screenshot of the section you are referring to. Looking into this, could you let us know which theme you are using? As this context will determine the next steps to moving the navigation menu towards the announcement bar.

 

If you are unsure about which theme is live on your store, you can navigate to the Theme Editor and select the three dots that are appearing towards the top left of the page. I took a screenshot from my test store to show you where the three dots located:

 

23-00-16119-19389

 

Looking forward to your response.

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

SidouLF
Excursionist
24 5 4

This is an accepted solution.

Hey @HDB2021 

 

Here is how you can move the menu to the right, go to Online store -> Actions -> Edit code and on the search field search this file base.css then on your keyboard click on Command+F (Ctrl+F on Windows) and input the following line of code and hit Enter.

.header--middle-left

 Now scroll down a bit and you should see the following CSS code 

.header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

 

If you want the menu to float to the right remove where it says auto auto 1fr and replace it with 1fr so it will look like this 

.header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: 1fr;
    column-gap: 2rem;
  }

 

However if you ever want it to be centered instead, then change it to 1fr auto 1fr so it will look like this

.header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

 

 

As for the cart, from a UI perspective, it's bad practice to make a cart hard to access/see for your potential customers so I advise you to leave it there

 

 

PS: For this to properly work you must have selected on the theme customizer Logo position on large screens -> Middle left

 

View solution in original post

HDB2021
Tourist
5 0 0

I am using the Dawn Theme!

SidouLF
Excursionist
24 5 4

The solution above is for the Dawn theme, check it out

HDB2021
Tourist
5 0 0

Thank you so much! I appreciate your response!