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!
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
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
