Helix Ultimate Multi Rows Header - Forum | JoomShaper
Awaiting an answer Helix Framework

Helix Ultimate Multi Rows Header

Asked by Matt Hunt 2 years ago Last activity 2 years ago

How can I adjust the width of the logo when using the Multi Rows Predefined Header? I've got a rather wide but short logo image to use, but the template is squeezing/distorting it.

11 replies

Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us. Could you please give me your site URL and also screenshot of your issue? So that I can check.

-Regards.

Mehtaz Afsana Borsha Staff

Is this solved now?

Matt Hunt Asked this

The client changed thier mind, so I don't need the anser for this site. I would like to know how to address it in the future though. If possible

Matt Hunt Asked this

I'd like to see if we could figure this out, please. I've another client that I would like to use the multi-row header with, but it again has a wide image/logo for use on the top row. The predefined header however is squeezing it down considerably. Please see the image "Vassalboro Sanitary District". That image should be 50x850.

Pavel
2 years ago · edited

Hi. This can be solved through CSS only.

.logo-image {
    height: auto !important; 
}

The width depend on the width of the Logo column.

Just to let you know. Logo settings in the template are completely suitable for SVG responsive image type only. Unfortunately, this is not universal. For any other types of images like SVG fixed size, png, jpg, gif, additional CSS coding may be required.

Matt Hunt Asked this

That just made it smaller, but it is no longer distorted. How do I adjust the width of the logo column?

Pavel

Hi. If you use predefined Header, then via CSS

Something like

#sp-logo {
    width: 300px;
}
Matt Hunt Asked this

Thanks, I also had to include margin:auto; to get the logo to center properly.

Matt Hunt Asked this

Sorry to bother you again. It is looking perfect on the desktop, but on mobile the logo is pushed down on the Menu line and is squished again. Any chance there is css to keep that from happening?

Log in to reply.