Increase header logo size bit more with code

Store Design
, , , ,

Topic summary

A user seeks to increase their header logo size without compromising image quality using CSS code.

Solutions Provided:

  • Option 1: Add transform: scale(1.1) to the .header__heading class in the base.css file
  • Option 2: Insert custom CSS in theme.liquid before the </body> tag, including:
    • Mobile-specific padding adjustments for screens under 767px
    • Logo scaling using transform: scale(1.2)
    • Margin adjustments for header search elements

Outcome:

The issue was resolved successfully. The user confirmed the solution works as intended.

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

Is there a way i could increase the Logo size on my header slightly more witouth reducing the quality of the image with some code? Thanks for you’re help already!

@BSSCommerce-B2B

IMG_0364.png
IMG_0364.png1290×2796 316 KB

2

Add this code to base.css file

.header .header__heading {
   transform: scale(1.1)
 }
1 Like
3

Hello @NinoB97

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .header { padding: 8px 2rem !important; } .header__heading-logo-wrapper img{ transform: scale(1.2); } .header--top-center>.header__search{ margin-left: 20px !important; } }

niraj_patel_0-1722832627188.png
niraj_patel_0-1722832627188.png316×290 34.9 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
4

Great, works good