SVG Logo appears on main header, but not on sticky header.

Hello,

I have a problem with the logo on the header. I use a svg logo on both, main and sticky header. But it appears only on one of them. When I change the settings in the header and enable the “Use height and width” option, it appears only on the main header, and the sticky area is blank. If I uncheck this option, it appears in the sticky header, but the main header is blank. No idea what is going wrong there. Do you need the login data? Thank you in advance.

Hello,

Yes, please, provide us your admin access so we can check the problem.

Kind Regards

Hello Artem, post them in privat. Thank you!

Hello,

Your logo SVG file has undefined width and heights attributes and uses 100% instead (https://prnt.sc/122su5w). Try to edit your logo and set to it proper width and height values. For example width="300" height="137".

Kind Regards

Hello Bogdan, thanks for reply. I made 2 new .svg files with smaller sizes. But it does not solve the problem. I don’t know if it is important or not, but I noticed in the chrome/console, that in one case the sticky logo has some scrset data:

srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

when I delete the data:image…. in the console, the sticky logo appears. I just don’t know what this srcset data is and how I can remove it.

I also tried .png and they are shown without problems. But the .png are looking not so crispy like the .svg

Thank you so much for your help! I really appreciate it

This issue is caused by unsupported SVG logo attributes.

We have checked your latest logo file from your site and found that it “width” and “height” attributes in it is still not changed (https://prnt.sc/126mr45) like it was suggested in the previous reply. To fix this issue you need:

1. Open your current SVG logo file in any text editor (Notepad, Visual Studio Code, Sublime Text).
2. Found width="100%" height="100%" in it. (http://prntscr.com/126n2lw)
3. Replace it with absolute length units in pixels width="300" height="137". (https://prnt.sc/126n82p)
4. Save your file and upload to your site.

Also, “Logo image for sticky header” is useful only if you plan to use different logo for standard and sticky header. If you want to use the same logo in standard and sticky header you can leave “Logo image for sticky header” option blank and sticky header will use the image from standard header.

Kind Regards

Hello Bogdan, that helped! Thank you so much 🙂

Skimi

You are welcome!

[Author]

Posts