[Resolved] Setting header element logo image width and height attributes

[James]

Hi,

I’m currently trying to fix two issues with the logos on some of my pages. These pages have a GP header element with merged logos (a custom site logo and a mobile header logo).

I’ve found other code in the support forums which has helped me set the HTML width and height attributes for my main logo and mobile logo, however the code doesn’t work for the header element logos (those within the divs with CSS classes “page-hero-logo” and “page-hero-mobile-logo”).

How can I set the HTML attribute height and width for these?

Secondly, is there a reason why, on pages where I’ve added new logos in the header element, there needs to be four logos? i.e. the original 2 logos for the rest of the site and the new 2 logos for that page.

Cheers!

[David]

Hi there,

sorry for the delay in responding – your topic slipped through our system.

So the missing width and height attributes only seems to be affecting the page hero mobile logo.
It should pick up the attributes automatically – i may need to check that.

I am wondering whether you need to use the Mobile Header – as the Desktop Logo(s) look to be the same image as being applied to the Mobile Logo(s).
You could try it without the mobile header and we may just need a little CSS to resize the logo on smaller devices. It would get rid of the extra images.

Let me know.

[James]

Thanks for this. I’ve implemented your suggestion and that’s solved the four logo issue. Is there a way to stop the mobile menu button / search button from turning black when selected? I want to keep them black on pages without a header element and keep them white on pages with a merged header element.

Unfortunately the mobile header on pages with a merged header element still doesn’t have html width and height attributes.

Thanks

[David]

Try adding this CSS:

.mobile-menu-open .header-wrap .mobile-menu-control-wrapper a,
.mobile-menu-open .header-wrap .menu-toggle {
    color: #fff;
}

I checked the merged header pages and the logo does have width / height attributes ?

[James]

Hi David,

Perfect, thanks – that code works great.

I realise now that the dimensions issue was showing on my live site (where I had uploaded a new svg image) but not on my staging site.

For anyone who is finding that the dimensions aren’t being set – you can solve this by installing a plugin like Safe SVG, reuploading the image and then the image has dimensions set. You can disable the plugin right after.

[David]

Glad to be of help. And thanks for sharing your solution!
As a note use the SVG Support plugin:

https://en-gb.wordpress.org/plugins/svg-support/

The author of Safe SVG has recently abandoned the plugin.

[Author]

Posts