Adjusting login icon in header of Dawn theme

Store Design

Topic summary

A user enabled customer logins in their Dawn theme and noticed the login icon in the header was misaligned with the search and basket icons.

Solution Provided:

  • Navigate to Online Store → Theme → Edit code
  • Open the base.css file
  • Add CSS code at the bottom to adjust the login icon alignment

CSS Fixes Suggested:

  • One solution used margin-top: -5px !important; on .account-icon
  • Another recommended display: flex !important; for the account icon

Outcome:
The original poster confirmed the solution worked and thanked the community. The issue was resolved through simple CSS adjustments to vertically align all header icons.

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

Have enabled customer logins and the new login icon that appears in the header is not in line with the search icon or basket icon

2024-05-11 (5).png
2024-05-11 (5).png724×139 14.3 KB

Does anyone know how I can add a bit of padding to the bottom of this to make all 3 line up?

Thanks

Site details:

https://7a5425-c8.myshopify.com/

stiald

2

Hello @yapofire ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

account-icon{
       margin-top: -5px !important;
}

thirtycoders_0-1715502883111.png
thirtycoders_0-1715502883111.png512×332 87.4 KB

Thanks!

1 Like
3

Perfect

Thank you!

1 Like
4

Hi @yapofire

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

account-icon {

display: flex !important;

}

also, Ensuring the video fits the screen without requiring scrolling or zooming enhances the viewing experience for users. They can easily grasp the entire video content without any disruptions. This creates a more engaging viewing experience and boosts interaction with the content. In Conversion Rate Optimization (CRO), it’s vital to ensure that each section of the website or app fits the screen, enabling users to access information effortlessly without the need for scrolling or zooming. This not only increases user engagement opportunities but also enhances the overall experience, especially when watching videos.

PageFlyHenry_0-1715504120689.png
PageFlyHenry_0-1715504120689.png1366×600 820 KB

Hope that my solution works for you.

Best regards,

Henry | PageFly