FROM CACHE - en_header
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

Reduce header width on Motion theme

Solved
Polina_Frolova
Tourist
6 1 2

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

Accepted Solution (1)

Accepted Solutions
AvadaCommerce
Shopify Partner
3879 837 803

This is an 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.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

View solution in original post

Replies 3 (3)
ReturnPrime
Shopify Partner
412 58 91

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
Shopify Partner
3879 837 803

This is an 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.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

Polina_Frolova
Tourist
6 1 2

Worked perfectly, thank you!!