Reduce Header Height in North Theme

Store Design
1

Hi! I’m using the North 7.0.0 theme. I want to increase my header logo size and keep more or less the same header height.

I re-coded my logo as follows to 240.

{

        "type": "range",

        "id": "logo_height_range_mobile",

        "min": 20,

        "max": 240,

        "step": 5,

        "unit": "px",

        "label": "Mobile logo height",

        "default": 25

}

Now my header scaled to my logo size and is much too big

Shopify Store
Shopify Store513×445 90.8 KB

I can’t seem to get any of the suggestions to reduce header height to work in my case. Any help would be greatly appreciated. Thanks in advance!

2

I’m not seeing your screenshot on the live site. Your live version has a logo size of 80x80, and the header is also 80px tall, with a 15px top and bottom padding for mobile, and 25 px padding for desktop.

1000958947
10009589471080×1905 439 KB

Screenshot 2026-03-03 163601
Screenshot 2026-03-03 163601340×748 92.5 KB

Screenshot 2026-03-03 164120
Screenshot 2026-03-03 1641201061×776 281 KB

3

Hi! Yes, on my live site I undid the version that looked goofy. I’ll revert to the goofy version for a while.

4

Screenshot (179)
Screenshot (179)341×759 102 KB

Screenshot (180)
Screenshot (180)1060×765 270 KB

Screenshot (181)
Screenshot (181)478×242 9.4 KB

The header is the same height as the logo. So, it looks like you have a bunch of empty space in your logo image itself. This is making the image take up too much space in the header. I’m assuming you want the logo and the header icons to be moved up to the top. If you crop your logo image, and get rid of the unnecessary space above and below the actual logo, making it a rectangle instead of a square, it will look much better when you resize the logo. You removed the background, now you just need to crop the image.

5

Thanks for the suggestion! I hadn’t looked at it that way. No coding needed :smiley:

6

Thanks for sharing the details. Increasing the logo height in the theme settings usually makes the header scale automatically, which is why the header becomes too large. Instead of only changing the logo_height_range_mobile value, you may also need to control the header container height with custom CSS so the logo grows but the header stays compact.

You could try limiting the header height or adjusting the padding in the header section of the theme styles. That usually keeps the layout balanced while allowing a larger logo.

I’m actually trying to implement a similar adjustment on my own website as well, so this discussion is very helpful. Looking forward to seeing if someone has a clean solution for keeping a larger logo without increasing the header size too much.

For reference, this is my site where I test and apply different features