Solved Helix Framework

dimension logo

Asked by Carlo luzi 6 months ago Last activity 5 months ago

I’m using Helix Ultimate and this Multi-Row Header. This header allows me to position the logo in the centre, but I’d like to enlarge the logo and it ends up looking distorted. I’ve adjusted the dimensions in the ‘Logo Height’ tab, but I can’t set it to more than 120px. How can I make it larger without the logo becoming distorted? Thank you for your help.

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

6 months ago

Here is all you need for laptop/desktop view:

@media screen and (min-width: 1120px) {
 #sp-header-topbar  .col-xl-5,
#sp-logo, #sp-social, #sp-contact  {width: 33.33%;}
.logo-image {height: auto;max-height: 200px;}
}

Si, one vine for me.

Mehtaz Afsana Borsha Staff

5 months ago

Thanks for accepting the answer.

7 more replies

Mehtaz Afsana Borsha Staff

6 months ago

Thanks for contacting us. Could you please give me your site URL? So that I can check.

-Regards.

Carlo luzi Asked this

6 months ago · edited

Sure, here it is:

Thanks a lot

Mehtaz Afsana Borsha Staff

6 months ago

Hi,

Thank you for your question.

The Logo Height field is capped (around 120px), and forcing it higher can distort the image because it overrides the natural aspect ratio. The setting applies a fixed height. If width is not proportional → image stretches.Low-resolution logos also become blurry when enlarged.

You can try these Solution:

1: Use a Higher Resolution Logo (Most Important)

2: Upload a larger, high-quality logo (e.g., 300–500px height)

This prevents pixelation when scaling

Regards,

Paul Frankowski Senior Staff

6 months ago

Ciao.

Please use this custom CSS, becuase you cannot set the proper height manually in Template Options.

#sp-logo .logo-image {height: auto;}

Paul Frankowski Senior Staff

6 months ago · edited

To make logo bigger, you have to change grid in header-toolbar.

Imagine that you have 3 boxes. Left (1st) has size "5" , middle "2" , Right "5" . It means that item put inside box 2 is squeezed to fit inside. Instead of big round pizza you have sandwich in lunch box.

To make logo bigger, you have to reduce left and right column from "5" to "4", and make logo "4". Then your logo image will be more visible.

But becuase you used predefined header, you cannot simply change it from the template settings :/
and extra Custom CSS is needed (below).

Carlo luzi Asked this

6 months ago

Thanks, Paul – your CSS sorted the problem out. Thanks again.

Mehtaz Afsana Borsha Staff

6 months ago

Glad to know that. You can now close this post by accepting the answer. And thanks Paul for helping him.