Dawn Theme: Search Icon moved, is out of place

Store Design

Topic summary

A Shopify store owner encountered an issue where the search icon in their Dawn theme header suddenly moved out of position.

Solutions Provided:

Multiple support teams offered CSS-based fixes:

  • Quick fix: Add code to base.css to hide the misplaced search element and display the correct one using display: inline-flex !important

  • Alternative solutions:

    1. Adjust positioning with position: absolute and margin properties
    2. Hide the problematic element entirely while ensuring the proper header search displays

Resolution:

The issue was successfully resolved using one of the provided CSS solutions. The store owner confirmed the fix worked and expressed appreciation for the assistance.

All solutions involved editing the theme’s base.css file through the Shopify admin panel (Online Store > Themes > Edit code).

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

The search icon in my header moved suddenly, and I’m not sure why! Can someone please help me get it back to where it should be?

limelight91_1-1675304572073.png
limelight91_1-1675304572073.png3826×701 261 KB

website: wearlimelight.com

password: skeuba1

2

@limelight91 - did you edit code of the original search to have it outside icons?

add this css to the very end of your base.css file and check

.header__search {display: none;}
.header__icons .header__search{display: inline-flex !important;}

suyash1_0-1675306879787.png
suyash1_0-1675306879787.png1366×768 248 KB

suyash1_1-1675306899676.png
suyash1_1-1675306899676.png1366×768 193 KB

3

Hello @limelight91 ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1675306932993.png
GemPages_0-1675306932993.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

4

Hi.. @limelight91

step 01:

  1. Go to your Store > Theme > click to edit code.
  2. find this file "base.css " and open.

step 02:

  1. Paste the code at the end of the file.

I have 2 solution for you:
1st soluction is :

.header__icons .header__search {
    display: block !important;
}
details-modal#header-search {
    display: none;
}

2nd Solution is :

details-modal#header-search {
    position: absolute;
    right: 0;
    margin-left: 10px;
}

hope this idea helps you

5

Thank you! This worked. I really appreciate it.

6

I am so glad that my suggestion can help :heart_eyes: .