-
Posts
-
Hi there,
I’m having very similar issue to what is described here:
https://kriesi.at/support/topic/using-svg-for-main-logo-and-transparent-causes-problems/ but it doesn’t look like there was ever a public resolution to this.
The site I’m working on is this:On the home page we are using the transparent header with a white logo. Upon scroll and all other pages we are using a black logo. I have to use SVG because the png files are way too fuzzy.
I was able to get the black one to show. Separately I was able to get the white one to show, but I haven’t been able to get both to show at the same time. Here is the latest CSS I have (I’ve tried a bunch of variations of this). I’ve also tried a bunch of variations of using the .png files in the upload fields but haven’t found a solution.
.logo img {
display: none;
}
.logo {
background: url(‘/wp-content/uploads/2020/01/logo-svg-black.svg’) no-repeat;
width: 340px;
height: 125px;
}
.page-id-2 .av_alternate_logo_active .logo img {
display: none;
}
.page-id-2 .av_alternate_logo_active .logo {
background: url(‘/wp-content/uploads/2020/01/logo-svg-white.svg’) no-repeat;
width: 340px;
height: 125px;
}Any help would be appreciated!!
I’d recommend a little plugin: https://en-gb.wordpress.org/plugins/svg-support/
Besides the advantages of using svg like imgs, it also has the advantage that you can see previews of svg files in the media library.
Furthermore you could also use the svg you use inline; i.e. if an img src encounters an svg, the img tag is exchanged with the svg. etc. ppUsing an inline svg file could have a lot of advantages. f.e. you can influence the classes in the svg by css.
See here – and scroll down. The “Bonn” has in the svg a given class and i set the opacity to zero on header-scrolled.
Or on hove fill it red etc. : https://webers-testseite.de/cynthia/Thanks. I’m not sure how I can add a special class to the logos (transparent and not). Can you help with that?
Thanks!1) you are concerning to the svg classes inside. These are set in the program you used to generate the svg file.
Illustrator usually takes st0, st1 etc.
May i see a link to your svg logo? – or open it yourself in a good text-editor on your Mac/PC ( sublime-text / notepad++)
Look to the source code of : https://webers-testseite.de/cynthia/wp-content/uploads/2018/05/Ein-Logo.svg
there you got the classes – and of course you can change them here too with a good text-editor. IDs and classes .
you see the initial styles on top ( fill parameter etc )PS : if you are using svg as inline svg – you must think of giving a dimension to it via css on your quick css – otherwise it will not be shown on some browsers ( chrome / safari )
2) if you mean the trigger class of that plugin to substitute the img by the inline svg – you can manage that via jQuery in functions.php.
OK thank you for the idea! It didn’t occur to me to add a class within the svg file itself. My problem I don’t think is with the svg file but rather not knowing how to style / target the sticker header and the two different logos. This is the page I’m having trouble with. https://thealtcarecollective.com/
I have the white svg logo https://thealtcarecollective.com/wp-content/uploads/2020/01/logo-svg-white.svg showing up when you load the page. Perfect. But when you scroll, I need it to show the black svg file. https://thealtcarecollective.com/wp-content/uploads/2020/01/logo-svg-black.svg. It’s currently still showing the white one.On the inside pages the black logo is showing correctly. However on mobile, it is showing a double logo.
Any ideas?
Thanks!in the moment you got the not fixed header – so the scrolled header isn’t in viewport.
This mentioned page is a page with transparency. For that case Enfold got that extra input field in Enfold Options:
Enfold (Child) – Header – Transparency Options : Transparency Logo ( and Transparency Menu Color )
so insert in the normal logo field your white svg.here are you logos a bit styled inside svg: https://webers-testseite.de/AltCare.zip
If you do it this way described above ( the white one to transparency options input field – the black one to normal logo input field.
i styled your logo inside – you see some groupings with ids – each of them can be selected separatly now. The underlined “preserve…” is for shrink behavior of the svg – now it shrinks in y-direction to the middle but on x-axis to the left
This is only possible with that plugin mentioned on top.
But if you see this page : https://webers-testseite.de/cynthia/alt-care/
you see what you can do with real inline svg files.so with inline svg i can colorize only the Alt/Care on scrolled state etc. pp
Info : Enfold sets for transparency header state a class to header: av_header_transparency
on shrinking header the classes comes to header : header-scrolled and header-scrolled-full
- You must be logged in to reply to this topic.