Dawn theme mobile view header customization

[Sivadarshan]

I’m using the Dawn theme, and I need to customize the mobile view header. I’ve attached an image for reference.

In the mobile header:

• I want the hamburger menu, cart icon, and account icon to be aligned neatly at the edges of the search bar, with proper spacing.

• The search bar height should be slightly reduced.

• The “Search” placeholder text should have 0px letter-spacing.

Reference image:

website link: https://amber-silverz.myshopify.com/

password: amber

[dmwwebartisan]

@Sivadarshan

amber

@Sivadarshan

Please add the following code at the bottom of your css file.

@media (max-width: 990px) {
#shopify-section-sections--24946633539949__header .header {
    max-width: 100% !important;
}

.header {
    padding: 0px !important;
}
input#Search-In-Modal {
    height: 3.5rem !important;
}
input#Search-In-Modal::placeholder {
    letter-spacing: 0px;
}
}

Hope this works.

[oscprofessional]

Hi @Sivadarshan ,

Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file.

@media (max-width: 768px) {
header.header {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.header__icons.header__icons--localization.header-localization {
    padding-right: 0;
}
.search__input.field__input {
    height: 3.5rem !important;
}
label.field__label {
    top: 7px !important;
}
}