Dawn theme header hamburger menu and cart icon center

[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 center to the logo

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

password: amber

[Moeed]

Hey @Sivadarshan

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (max-width: 767px) {
sticky-header.header-wrapper.color-scheme-c1f087a9-728a-4226-984e-ed55ed0213ae.gradient header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-account {
    align-items: center !important;
}
header-drawer {
    padding-top: 2rem !important;
}
.header__icons.header__icons--localization.header-localization {
    padding-top: 2rem !important;
}
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[Sivadarshan]

Hi @Moeed, there is a gap, when i open menu in mobile

[mageplaza-cs]

Hi @Sivadarshan ,
You can add the following code to the base.css file to reduce that spacing:

@media screen and (max-width: 769px) {
    .collection .grid__item{
        padding: 0 !important;
        width: 100%;
        max-width: 100%;
    }
}

RESULT