How do I align my search symbol with the menu?

Shopify Discussion

Topic summary

A Shopify store owner needed help aligning their search icon with the menu navigation. The misalignment was visible in a screenshot they shared.

Solution Provided:
A community expert offered CSS code to fix the alignment issue:

  • Method 1: Add code to the base.css file via Online Theme > Edit Code
  • Method 2: Insert code through Theme Customizer settings

The CSS targets .header__icon.header__icon--search.header__icon--summary with height: auto !important;

Initial attempts failed, so the expert provided an alternative approach: inserting the CSS code into the theme.liquid file before the </body> tag.

Resolution:
The final solution successfully fixed the alignment issue. The original poster confirmed it worked and expressed gratitude for the assistance.

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

Hello,

Please I need step by step help with aligning my search symbol with the menu. Please see image below for how it looks at the moment

Screenshot 2024-02-18 at 17.30.01.jpg
Screenshot 2024-02-18 at 17.30.01.jpg2880×1800 400 KB

2

Hi @deezaorganics welcome to the Shopify Community,

Can you please paste below code into theme customizer or base.css file at the end.

Method .: Placing code in base.css file

Online Theme > Edit Code > find base.css file and paste at the end and hit save.

summary.header__icon.header__icon--search.header__icon--summary.{
    height: auto;
}

Results:

2024-02-19 10_25_15-Deeza Organics - Pure Aromatherapy Oils, Cosmetic Ingredients and More.png
2024-02-19 10_25_15-Deeza Organics - Pure Aromatherapy Oils, Cosmetic Ingredients and More.png1150×349 242 KB

Method 2 :

Theme Customizer Settings:

  • Online Theme > Theme Customizer

2024-02-02 10_21_57-.png
2024-02-02 10_21_57-.png1340×607 57 KB

Thanks

3

Hello,

Thanks a lot for this however it did not work for me. Not sure why. I tried both options

4

Hi @deezaorganics

i guess it should work 100%. because i have tried it already. Do you want me to do that for you ?

Thanks

5

Yes please i dont mind. I posted exactly what you sent but no change.

6

Hi @deezaorganics

Ok please share

Thanks

7

Hi @deezaorganics

please put this code into your theme.liquid file before the tag

.header__search summary.header__icon.header__icon--search.header__icon--summary {
    height: auto !important;
}

Thanks

1 Like
8

Thank you very much! You were of great help. God bless you

1 Like