The elements in hamburger menu on Dawn theme are no longer alighned

Store Design
1

Hi guys,

I have a question related to the mobile view of the Dawn theme. Recently I moved the logo button to the left but as I did so, my search button on the right side of the screen moved up and is no longer aligned with the rest of the header elements. Does anyone know what might have caused it and how I can get it fixed? Moreover, I was wondering how I can add some padding on the left of the logo to give it slightly more space on the left? I feel like it would make the header look more volume.

P.s. In case it would help, the code I used for moving logo to the left in base.css:

.header__heading, .header__heading-link {

grid-area: heading;

justify-self: center;

}

I also tried to test removing all the icons except for the logo with this code:

@media only screen and (max-device-width: 768px) {

.header__icons {

display: none;

}

}

I later dropped the idea though because it looked too empty for my taste. As soon as I did remove the code, my search button moved up.

The website is bentoli.nl

Password: ahghia

2

Hi!

Head into your base.css code and search for the following section of code:

.header__icon .icon {
    height: 2rem;
    width: 2rem;
    fill: none;
    vertical-align: middle;
}

Once found, remove height: 2rem; and hit save.

This should solve your issue :slightly_smiling_face:

1 Like
3

Great, thanks! Might you happen to know anything about spacing on the left as well?:slight_smile:

4

You’re very welcome!

head to your base.css and find the following:

.header-wrapper {
    display: block;
    position: relative;
    background-color: rgb(var(--color-background));
}

then adding padding-left, as seen below:

.header-wrapper {
    display: block;
    position: relative;
    background-color: rgb(var(--color-background));
    padding-left: 10px;
}

You can change the value to whichever amount you require, however, as the logo is in its own container, it will start to get smaller if you add to much

1 Like