how to reduce the height of the header

Store Design
, , ,

Topic summary

A user wants to reduce the header height on their Shopify store while ensuring all header elements adapt correctly on both mobile and desktop.

Solution provided:

  • Navigate to Online Store > Themes > Edit Code
  • Locate the base.css file
  • Add CSS code at the end of the file:
    .header__heading-logo {
  height: 100px;
  width: 100px;
}
  • Save the changes

The response includes before/after screenshots demonstrating the reduced header height. The discussion appears resolved with a working CSS solution, though the original post contains some reversed/encoded text that may indicate formatting issues.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello

I would like to reduce the height of the header on our Shopify store while ensuring that all elements within the header adapt correctly to this new height on mobile and deskstop.

My website : https://coconbypharell.com/

thanks

2

Hi @herve_stg ,

You can follow these steps

Step 1: Go to Online store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

.header__heading-logo {
    height: 100px;
    width: 100px;
}

Result:

BSSCommerceTC_0-1721930079453.png
BSSCommerceTC_0-1721930079453.png1901×919 265 KB

BSSCommerceTC_1-1721930093221.png
BSSCommerceTC_1-1721930093221.png356×914 244 KB

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.