How do I reduce the height of Header? I am using the Warehouse theme. Please help

Store Design

Topic summary

Reducing excessive header spacing (blue area) around the logo and search bar in the Warehouse theme.

  • Solution (desktop): Edit theme.css.
    • At line 5769, within the media query @media screen and (min-width: 641px), adjust .header padding (e.g., comment out padding: 20px 0) to reduce header height.
    • At line 5779, adjust .header__logo margin-right to control spacing between the logo and the search bar.

  • Follow‑up (mobile): Logo appears too small.
    • Fix via theme/header settings in the Customizer by increasing the logo width; a max-width was limiting the image.

  • Outcomes:
    • Desktop header height and logo/search spacing successfully reduced.
    • Mobile logo size increased via settings without disrupting the desktop adjustments.

  • Notes:
    • Screenshots were provided to illustrate header spacing and mobile logo size.
    • CSS (Cascading Style Sheets) rules and a media query (styles applied to screens wider than 641px) were central to the fix.

Status: Resolved; no outstanding questions.

Summarized with AI on February 6. AI used: gpt-5.
1

I want to reduce the blue space around the logo and search bar.

Haris22_0-1665446018827.png
Haris22_0-1665446018827.png1906×588 74.7 KB

Please help :slightly_smiling_face:

2

Link to store?

3

It is www.deals4you.com

4

Check out your theme.css line 5769, you’ll see this

@media screen and (min-width: 641px) {
.header {
padding: 20px 0;
//put two slashes infront of what's above like this - //padding: 20px 0;
}

And on line 5779 you should see

@media screen and (min-width: 641px)
.header__logo {
margin-right: 35px;
// the code above adjusts the space between the logo and the search bar adjust as wanted.
}
1 Like
5

It worked perfectly, thank you so much! I have one more question, if you don’t mind. When I look at the mobile version, the Deals4You logo is very small for some reason. Is there any way I can increase the size of the logo (on the mobile side) without messing up this?

See how small it is below?

Haris22_0-1666039733760.png
Haris22_0-1666039733760.png1906×660 104 KB

6

I believe you can increase the logo width in your theme settings or header settings. As I can see a max-width is being added to your image. In your Customizer, check out the header section and I’m sure you’ll see the option to increase the width.

1 Like
7

Looks so much better! Thank you again, much appreciated!