Solved

How to make dawn header height smaller on mobile

Jeffhardy
Tourist
7 0 1

Hello, is there a solution to this?

glamgirl.eu
Pass: sohfro

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @Jeffhardy 

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (max-width: 759px){
.header__heading-link.link.link--text.focus-inset{
        padding: 0px !important;
}
.header {
    padding: 0px 12px !important;
}
}

 

View solution in original post

Replies 5 (5)

PaulNewton
Shopify Partner
6274 573 1319

In situations like this first try to remove the excess height from images when the logo has a lot of transparent height.

Otherwise you need to adjust the css.

Always backup themes and files when making code changes

Look for the following CSS style in your dawn themes base.css file as they seem to have been added custom: 

@media only screen and (min-width: 992px) {
    header.header.header--middle-left.page-width.header--has-menu {
        position:relative!important;
        top: -30px!important;
    }

    sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
        height: 43px!important;
    }
}

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Jeffhardy
Tourist
7 0 1

Okay, I tried to change images. Doesn't work. What should I do with the code?

DevsMedia
Shopify Partner
32 0 1

Hi, can you share your store link?

If the solution is helpful then please Like and Accept the Solution.
Do you want to customize your store, then Hire us.
- Feel free to contact us on hello@devsmedia.com regarding any help
Shopify Expert | Whatsapp: +8801972574364
Jeffhardy
Tourist
7 0 1

glamgirl.eu
Pass: sohfro

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @Jeffhardy 

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (max-width: 759px){
.header__heading-link.link.link--text.focus-inset{
        padding: 0px !important;
}
.header {
    padding: 0px 12px !important;
}
}