Mobile Header: Search Bar Icon Misalignment Adjustment

[crepscity]

Hi there,

On mobile version only the search bar icon in the header is positioned slightly lower than the other icons and elements, creating a misalignment. This needs to be adjusted so that the icon aligns evenly with the surrounding components.

the dawn theme 15.2.0 is not published yet and is currently on my editor labeled 'Latest Version Of Dawn Theme 15.2.0 IN PROGRESS'

[Made4uo-Ribe]

Hi @crepscity 

Please, share the preview of your theme. Thanks!

[crepscity]

Sure.

[LizHoang]

Hi @crepscity 

Can you share the preview store url of your theme? Thanks!

[crepscity]

Hi Liz,

bare in mind the issue is for mobile version.

https://crepscity.com/?_ab=0&_fd=0&_sc=1

[LizHoang]

Hi @crepscity,

Since the theme has not been published yet, I am unable to check its functionality. In this case, the theme needs to be published first so I can properly test and provide you with a suitable solution. 

Liz

[B2Bridge · Accepted solution]

Hi @crepscity, please follow these steps:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find base.css file

Step 3: Paste this code at the bottom of the file.

@media screen and (max-width: 749px) {
    details-modal.header__search .header__icon--search {
        position: absolute;
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
    }
}

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you 😍 

[crepscity]

Hi B2Bridge,

Thank you, that worked! By the way, do you know how I can move the login icon from the menu to the header, next to the cart icon on the left side? Also, the background of the menu is currently white—how can I change it to black without affecting the background of other pages?