Why isnt Header image responsive?

Hi @recoil9

Thanks for using Suki and we’re really glad that you like it.

Can you share the site URL that you are currently working on?

Yes, we encourage users to input logo width, both for desktop header logo and mobile header logo. There are some reasons why:

– Suki supports SVG logo (using SVG for logo is really recommended because of its best quality). And specifying the logo width is required in this case. Otherwise the SVG logo width would be uncontrolled.

– Retina image. People want to have a really sharp logo (because it’s their branding). Thus, they will upload the retina version. So let’s say you want the logo to be 100px width, you could upload 200px logo image but set the width option to 100px. This way, your logo would look sharp on both normal and retina devices.

– We want consistency and defining logo width in “px” is the right approach in our opinion. If you use “%” or let the logo fluidly resize on smaller browsers, that would make your logo looks too small on some devices.

Let me know if you still need help with this. It would be better if you can share the site URL so we can point out how the solution would be.

Regards,
David

Ah, thank you David for the quick informative reply. I tried resizing the logo for mobile device but if i make it the width of my mobile phone, for example, it pushes the three bars for drop down menu off the screen. I also wanted custom html so phone number would display at top but that gets pushed off screen as well and doesn’t wrap underneath the logo.???

Here is a link to explain and show the problem I have with your mobile logo forced pixel width. Please see images and explanation. Thank you. Click Here

Hi,

So what kind of mobile header layout that you want? Is there any design draft? Maybe you can use a bit of custom CSS.

The way we organize the layout on desktop header and mobile header is like this:

– Each section has a fixed height value (for further implementation, e.g. Sticky Header module on our Suki Pro addon).
– Header elements are put into each different column.

In your example, you put the logo on left column, and mobile menu toggle on right column. It’s expected that the mobile menu toggle will never wrapped down below the logo.