How to make dawn header height smaller on mobile

Solved
Jeffhardy
Tourist
7 0 0

Hello, is there a solution to this?

glamgirl.eu
Pass: sohfro

Accepted Solution (1)

Accepted Solutions
Natztech
Shopify Partner
2237 565 1373

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
3448 226 668

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;
    }
}

 

Join the discussion - What was learned this Black Friday?


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

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

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Jeffhardy
Tourist
7 0 0

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

DevsMedia
Shopify Partner
14 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 0

glamgirl.eu
Pass: sohfro

Natztech
Shopify Partner
2237 565 1373

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