How to move search icon & shopping cart into Announcement bar on the right side Dawn7.0.1

Shopify Discussion

Topic summary

A user is attempting to relocate the search icon and shopping cart to the right side of the announcement bar in Shopify’s Dawn theme version 7.0.1.

Proposed Solution:

  • Edit the base.css file via Online Store → Actions → Edit code
  • Search for .header--middle-left using Ctrl+F (Windows) or Command+F (Mac)
  • Modify the grid-template-columns property from auto auto 1fr to 1fr to float the menu right
  • Alternatively, use 1fr auto 1fr to center the menu

Important Notes:

  • The theme customizer must have “Logo position on large screens” set to “Middle left” for this to work properly
  • From a UX perspective, moving the cart may make it harder for customers to access

Current Issue:
The original poster cannot locate the .header--middle-left code in their base.css file and has shared their website URL for further assistance. The discussion remains unresolved as they await guidance on alternative file locations.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am trying to move both the Search icon & the Shopping cart into the Announcement bar on the right side. It is Dawn7.0.1 that I am using.

I’d much appreciate it if anyone could tell me where I can find those codes as well as where I should place them to.

Many thanks in advance!

Screen Shot 2023-01-27 at 14.19.27.png
Screen Shot 2023-01-27 at 14.19.27.png1660×254 44.9 KB

2

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

1 Like
3

Thank you for your quick reply!

.header–middle-left

↑

this code does not seem to be located in base.css.

Do you have any idea where else it may be located at?

Just in case, here is my website

https://anynewyork-world.myshopify.com/

pass yayme