Moving Header Up padding issue

Shopify Discussion
, ,

Topic summary

A user seeks to reduce vertical spacing in their mobile header, specifically wanting the logo positioned closer to the announcement banner displaying “FREE U.S. shipping.”

Three solutions proposed:

  1. CSS padding adjustment: Add custom CSS targeting mobile screens (max-width: 989px) to remove top/bottom padding from header elements.

  2. Logo file optimization: The logo image itself contains excessive white space above and below. Cropping this whitespace and re-uploading the logo would naturally reduce header height without code changes.

  3. Logo sizing via theme.liquid: Insert CSS in the theme.liquid file to control logo max-width on both desktop (35%) and mobile (50%) viewports.

The discussion remains open with no confirmed resolution. The logo whitespace solution appears most straightforward, as it addresses the root cause rather than applying CSS workarounds.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone my website is thedrakeplushie.com . I need help moving the header up more just on mobile like right below the FREE u.s shipping banner. Thank you!

Screen Shot 2025-07-24 at 7.31.54 PM
Screen Shot 2025-07-24 at 7.31.54 PM648×1342 189 KB

1 Like
2

Hi @thedrakeplushie,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (max-width: 989px) {
    .header__heading, .header__heading-link {
        max-width: 150px;
        padding-top: 0;
        padding-bottom: 0;
    }
}
3

Hey @thedrakeplushie

There’s a lot of top and bottom white space in your logo, you just need to remove that and re-upload your logo and it will fix the problem by itself.

image
image515×498 32.2 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

6

hey @thedrakeplushie dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 768px) {
 .header__heading-logo { 
     height: auto; 
     max-width: 35%; 
}
}
@media screen and (max-width: 767px) {
 .header__heading-logo { 
     height: auto; 
     max-width: 50%; 
}
}
</style>