Search magnifiying glass in header

Topic summary

A user encountered a CSS layout issue in the Dawn theme where a magnifying glass icon overlapped the word “Search” in the header. They had previously added code to display “Search” and “Log In” text next to the “Cart” element.

Solution provided:

  • Add CSS code to assets/base.css that:
    • Sets the search header icon width to 10rem
    • Applies flexbox display with space-between justification

Outcome:
The CSS fix successfully resolved the overlapping issue. The discussion is now closed with the problem solved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

I received code earlier and it got me the word “search” and the word “Log In” which is what I wanted in the header next to “Cart” but I must have done something wrong because the magnifying glass is on top of the word “Search”.

Using Dawn theme.

Did I need to remove the icon in another line of code?

https://uniquegiftsandkeepsakes.com/

geefle

Thank you in advance!

Hey
add this code at the end of assets/base.css

summary.header__icon.header__icon--search { 
width: 10rem;
 }
summary.header__icon {
 display: flex ; 
justify-content: space-between; }

It worked thank you!

1 Like

Glad to hear that :slightly_smiling_face: