Aligning search icon, cart and main menu.

Store Design
, , ,

Topic summary

A user seeks to reposition their header elements: moving the search icon and cart to the right bottom corner, aligning them with the main menu, and reducing icon sizes. They provide a development store link and reference image showing their desired layout.

Solution Provided:
A contributor shares detailed CSS code and step-by-step instructions for customizing the header through the theme’s Custom CSS field. The solution uses grid template adjustments and icon sizing to achieve the alignment.

Current Status:
The original poster confirms the solution works. However, a second user (LisseStitch) attempts the same fix without success. After sharing their store URL, they clarify wanting the logo left-aligned, cart icon right-aligned, and all menu items in a single row on desktop view.

Ongoing Issue:
The helper provides responsive adjustments, but LisseStitch reports the desktop view still displays in two rows rather than the desired single-line layout. The discussion remains open as they work toward the correct desktop configuration.

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

Hi I need my search icon and cart to be positioned on the right bottom corner and aligned with the main menu items, also needed those icon sizes to be just smaller. Thanks before!

geunzy_0-1717068690282.png
geunzy_0-1717068690282.png2094×234 16.8 KB

2

@geunzy

You need some custom CSS code, If you don’t have idea of customization the theme files,

i suggest you to please hire a developer.

Thanks

3

@geunzy provide me the link, so i can check

4

https://e8cac3-b4.myshopify.com/

password: 281828

I was trying to get it as close to something like this,

geunzy_0-1717069557806.png
geunzy_0-1717069557806.png2992×124 4.62 KB

5

@geunzy Please follow below steps to align search and cart icon to the right bottom corner and smaller the icons. Let me know whether it is helpful for you.

  1. From admin go to “Online Store” → “Themes”.
  2. Click “Customize” button from the current theme.
  3. Click “Header”.

Vinsinfo_0-1717080400776.png
Vinsinfo_0-1717080400776.png429×356 12.5 KB

  1. Paste the below code in the “Custom CSS” field and save changes
@media screen and (min-width: 990px) {
  .header--top-center {
    grid-template-areas: "heading heading heading" "left-icons navigation icons";
  }
}
.header--top-center>.header__search{
    display: none !important;
}
.header--top-center *>.header__search{
    display: inline-flex !important;
}
.header__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}
.header__icon--cart .icon {
  width: 3.5rem;
  height: 3.5rem;
}

Vinsinfo_1-1717081387700.png
Vinsinfo_1-1717081387700.png402×778 40.2 KB

Result will be like,

Vinsinfo_0-1717081380210.png
Vinsinfo_0-1717081380210.png1793×785 191 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

6

@Vinsinfo

This is Correct Solution

7

absolute GOAT!

8

Hey Vinisinfo,

I tried doing the same thing but nothing changed. Could you please help me with the same ,

Thanks

9

@LisseStitch

Please share the store Url.

10

Hi @LisseStitch ,

Could you please confirm if this is your website URL: https://www.lissestitch.shop?

Additionally, let us know how exactly you’d like to align the header icons so we can assist you better.

11

Hi Vinsinfo,
Yess that is my website URL. I would like to have my logo shift on left side for desktop view and also the icon cart to the corner right but all the items in the main menu should be in the same line

Could you please help me with that .

Thanks

12

Hi,
This is my Website Url :- https://www.lissestitch.shop

Thanks

13

Hi @LisseStitch ,

Thank you for sharing your requirements. On the desktop view, the layout seems to match your preferences—the logo is on the left, the cart icon is on the far right, and the main menu items are in a single line.

Vinsinfo_1-1738131441212.png
Vinsinfo_1-1738131441212.png1346×227 30.2 KB

For the responsive view, we noticed that the menu items currently wrap onto a second line.

Vinsinfo_2-1738131469569.png
Vinsinfo_2-1738131469569.png973×230 20.6 KB

We’ve adjusted it so that navigation stays in a single line while maintaining the logo on the center above the navigation and the cart icon on the far right on same line of the navigations. Please see the attached screenshot for reference.

Vinsinfo_3-1738131500334.png
Vinsinfo_3-1738131500334.png970×268 35.2 KB

Could you please confirm if this updated layout matches your requirements, or if there are any additional changes you’d like us to make?

If this is not quite what you envisioned or if your requirements are different, please feel free to share any reference images or additional details. Alternatively, you can contact us to schedule a meeting where we can discuss your needs in more detail. We’re here to help!

Let us know, and we’d be happy to assist further!

14

No it doesnt on full screen view it is showing as earlier only and i dont want it 2 row wise