SVG in Header Logo area
Permalink Browser Info Environment
Hello!
I am trying to insert an svg in the "header logo area".
Image block works fine in this area with jpg, but on the smartphone for some reason C5 takes a smaller thumbnail and blows it up so it's all fuzzy. (At least I think that is what is happening)
So I would like to use svg.
I downloaded Mesuva's svg block from Github, and it works fine in other areas, but not in the header logo area. The logo disappears.
I know this is not a proper support question, but as the developer I was hoping you could recommend a way that I can implement svg in this area? It would look so much better.
Interestingly enough, for fun I inserted an svg as a "picture" in the text section of the header slider on the home page:
http://tanzraum-affoltern.ch/index.php...
It looks great in Firefox - is responsive, etc. (have to test further in other browsers)
Thanks for any input. By the way the theme is very nice - I have had to do minimal customization, and mostly just to work with branding. (fonts, colors)
I am trying to insert an svg in the "header logo area".
Image block works fine in this area with jpg, but on the smartphone for some reason C5 takes a smaller thumbnail and blows it up so it's all fuzzy. (At least I think that is what is happening)
So I would like to use svg.
I downloaded Mesuva's svg block from Github, and it works fine in other areas, but not in the header logo area. The logo disappears.
I know this is not a proper support question, but as the developer I was hoping you could recommend a way that I can implement svg in this area? It would look so much better.
Interestingly enough, for fun I inserted an svg as a "picture" in the text section of the header slider on the home page:
http://tanzraum-affoltern.ch/index.php...
It looks great in Firefox - is responsive, etc. (have to test further in other browsers)
Thanks for any input. By the way the theme is very nice - I have had to do minimal customization, and mostly just to work with branding. (fonts, colors)
| Type: | Pre-Sale |
|---|---|
| Status: | Resolved |
Yes Cory, I did place it in the nav area, just to see how it looks. Of course it looks good, but in the wrong position.
I will add the Mesuva svg block again in the Header Logo area. GIve me 5 minutes - or take a look when you have time.
Of course I will write a review.
I will add the Mesuva svg block again in the Header Logo area. GIve me 5 minutes - or take a look when you have time.
Of course I will write a review.
Ok, I think I see the problem. A SVG has to have its dimensions defined, and there are no dimensions (width or height) defined for the <img> tag. What you can do is add the following custom CSS:
.ccm-page .navbar-header img.ccm-svg-block {
height: 50px;
width: auto;
}
See if that helps.
.ccm-page .navbar-header img.ccm-svg-block {
height: 50px;
width: auto;
}
See if that helps.
Thanks Cory -
It is showing on Mac Firefox/ Chrome /Safari and iOS, but not on Windows IE 11. I knew svg is not compatible with IE8, but I guess they still haven't fixed it.
Sadly, the back-up jpg is also not showing. Hmmmm.
Maybe I will purchase the other SVG Block available from "A3020". The blocks from Github are sometimes not up-to-date.
It is showing on Mac Firefox/ Chrome /Safari and iOS, but not on Windows IE 11. I knew svg is not compatible with IE8, but I guess they still haven't fixed it.
Sadly, the back-up jpg is also not showing. Hmmmm.
Maybe I will purchase the other SVG Block available from "A3020". The blocks from Github are sometimes not up-to-date.
I'm glad you got it working. Too bad about IE. It's such a pain to work with that browser.
From the looks of it, it seems like you have the SVG in the wrong area. There are 2 areas in the navbar: "Header Logo" and "Header Navigation". The SVG should go in the "Header Logo" area. Let me know if you have trouble with that, and I'll try to help.
Best of luck, and thanks for buying Motif!
Cory