how can i reduce the hight of header?

Solved

how can i reduce the hight of header?

abdulquyyum
Tourist
5 0 1

Hi, i have design shopify website but its header hight is too large. can i reduce it or can minimize its hight ?
i am using motion theme and i am using logo with dimention 500x500 pixel on header.

you can see it in attached pic.

Capture.PNG

 

 

Accepted Solution (1)

PageFly-Noah
Shopify Partner
1317 233 281

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

You can add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
@media screen and (min-width: 768px){
   .site-header-sticky{
height: 100px !important;
}
.site-header{
padding: 0px !important;
}
.site-header__logo-link img{
height: 70px !important; 
}
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 4 (4)

JuneN
Shopify Partner
145 6 43

Hi,
If you could provide the link to your website, I'd be happy to assist you!

If you find my suggestion helpful, please give it a like or mark it as a solution!
And discover more approaches to:
Streamline invoicing process Boost sales with labels & badges Add social proofs & create FOMO
Or get valuable updates and private deals regarding Shopify here.
abdulquyyum
Tourist
5 0 1

https://vipcancunrental.com/
this is my shopify website 

 

PageFly-Noah
Shopify Partner
1317 233 281

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

You can add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
@media screen and (min-width: 768px){
   .site-header-sticky{
height: 100px !important;
}
.site-header{
padding: 0px !important;
}
.site-header__logo-link img{
height: 70px !important; 
}
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Made4uo-Ribe
Shopify Partner
10036 2385 3012

Hi @abdulquyyum 

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

h1.site-header__logo {
    margin: 0;
}
header.site-header.site-header--heading-style {
    padding: 0;
}
.site-header-sticky {height: auto !important;}

 

And save. 

I didnt reduce your header. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.