Moving Shopping cart icon to Announcement Bar

Store Design
1

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
Header Markup.JPG1354×547 42.8 KB

2

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
23-00-16119-19389651×563 193 KB

Looking forward to your response.

3

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

4

I am using the Dawn Theme!

5

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

6

Thank you so much! I appreciate your response!