How can I decrease the header width on Motion theme?

[Polina_Frolova]

Hi,

I'd like to reduce the width of the heading on desktop and mobile.

Currently there is too much extra padding on top and bottom.

I've already tried adding the following code to theme.css.liquid asset:

.site-header{ padding: 0px !important; }

But it didn't change anything.

https://ecup-store.myshopify.com/

Password: pohnge

Thank you for your help!

Kind regards,

Polina

[ReturnPrime]

Hey @Polina_Frolova ,
Welcome to the Shopify community!
Go to the theme.css file and paste the  below code.
Please remove whitespace from your logo.

.site-header__logo a {
  padding-top: 70% !important;
}
.site-header__logo img {
    display: block;
    position: absolute;
    top: -12px;
    left: 0;
}

Hope it helps.
Thank you!

Raman
Return Prime 



 

[AvadaCommerce · Accepted solution]

Hi @Polina_Frolova ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

.site-header__logo a {
    padding-top: 50% !important;
}
.site-header__logo a img {
    top: 50% !important;
    transform: translatey(-50%);
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[Polina_Frolova]

Worked perfectly, thank you!!