Change menu header size

Store Design

Topic summary

Main issue: The menu header appears too thick; root cause identified as an oversized transparent PNG logo.

Key proposals:

  • Theme settings: Reduce Section Padding, specifically Top Padding, to shrink vertical space.
  • Code-level: Edit theme.liquid and add CSS to limit the logo size (e.g., set .header__logo max-width and a smaller height). One suggestion referenced inserting code above but did not include actual code.
  • Image-level: Crop the logo to reduce its displayed height; a screenshot supported this diagnosis.

Actions and outcome:

  • The original poster confirmed the logo caused the issue and plans to crop it.
  • Guidance provided on using Shopify’s built-in crop tool via Online store > Themes > Customize, opening the logo section and using the crop option.

Status: Largely resolved by cropping the logo. Additional adjustments via padding or CSS remain optional if further fine-tuning is needed.

Notes:

  • theme.liquid is a core Shopify template file.
  • “Top Padding” controls the vertical spacing above content.
  • The screenshot was used to illustrate the logo-height problem.
Summarized with AI on December 21. AI used: gpt-5.
1

Hello, my menu is very thick, I want to make it thinner.

www.winegirly.com

Please help, thank you.

2 Likes
2

Hello, I’m Joseph

That is not a problem at all.

You can do that by simply going to your Home settings in your theme.

Then locate the Section Padding and adjust the Top Padding to your desired size.

I hope it helps. Thanks

You might need help with marketing the wine holder on your website for sales, You can let me know. Thanks again

3

Hi @VoyaTravel ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

4

Hi @VoyaTravel

Your logo caused the issue. Please crop your menu to solve it

Screenshot 2024-08-26 at 09.28.25.png
Screenshot 2024-08-26 at 09.28.25.png1619Ă—1032 76.7 KB

5

Hi @VoyaTravel , kindly use the below instructions and code

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
.header__logo {
    max-width: 150px !important; 
    grid-area: logo;
    display: flex !important;
    position: relative;
    height: 15px;
    align-items: center !important;
}

max-width: 150px !important; you can adjust this according to your need.

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

6

Thanks Dan, I figured that’s what happened. I uploaded the PNG transparent version the designer gave me, I will figure out a way to crop it.

7

Shopify has option to crop image, just go to Online store > Themes > Customize, open section where you added logo, click on logo image then you can see crop option

8

I didn’t know that, thank you!

1 Like