I apologize right away if it is difficult for you to understand me, I translate using google translate.
I welcome everyone!
Let's start with how my method differs from the already proposed ready-made solutions, I note that they have the character of the "best answer", but this is not for long)
And so, my method suggests replacing the standard logo with an SVG image, without uploading it in any way to the server.
That is, we will use the standard <svg> </svg> tags directly inside.
First steps we need to open the SVG image in any convenient editor.
Select and copy all <g> and <path tags.
Then you need to go to the admin panel and go to the Appearance item and select the Edit Custom Header item.
Using the example of my SVG, by analogy, substitute your <g> and <path values.
So our logo should have appeared at the very top above the header, now with the help of positioning we will put it in the place we need.
by class we style in custom styles. Now the most important thing is to make our main logo invisible by simply writing .Header-logo {display:none;}
Now we can apply the stroke color and other properties to the logo class in the same way, all pseudo-classes work the same way!
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="id" viewBox="0 0 570.000000 119.000000">
<g transform="translate(0.000000,119.000000) scale(0.100000,-0.100000)"
>
<path d="M1060 589 l0 -591 398 4 c366 4 402 6 465 25 94 28 145 68 182 139
l30 58 0 350 c0 312 -2 357 -18 402 -22 65 -75 120 -144 151 -97 45 -179 52
-560 53 l-353 0 0 -591z m704 356 c79 -40 81 -47 84 -308 4 -283 -1 -351 -33
-383 -34 -34 -81 -42 -277 -50 l-178 -7 0 387 0 388 183 -4 c158 -3 187 -6
221 -23z"/>
<path d="M2360 590 l0 -590 470 0 470 0 0 100 0 100 -320 0 -320 0 0 150 0
150 280 0 280 0 0 105 0 105 -280 0 -280 0 0 130 0 130 310 0 310 0 0 105 0
105 -460 0 -460 0 0 -590z"/>
<path d="M3510 1176 c0 -4 399 -1116 415 -1159 7 -16 22 -17 177 -15 l170 3
218 588 217 587 -136 0 -136 0 -159 -475 c-87 -261 -161 -475 -165 -475 -3 0
-78 214 -166 475 l-160 475 -137 0 c-76 0 -138 -2 -138 -4z"/>
<path d="M395 821 l-390 -137 0 -108 0 -108 399 -139 c220 -76 403 -139 408
-139 5 0 7 48 6 106 l-3 107 -280 83 c-154 47 -284 85 -289 87 -7 2 217 72
522 162 l52 16 0 104 c0 94 -2 105 -17 104 -10 -1 -193 -63 -408 -138z"/>
<path d="M4880 855 l0 -104 53 -16 c304 -90 528 -160 521 -162 -5 -2 -135 -40
-289 -87 l-280 -83 -3 -107 c-1 -58 1 -106 6 -106 5 0 188 63 408 139 l399
139 0 108 0 108 -395 138 c-217 75 -401 138 -407 138 -10 0 -13 -27 -13 -105z"/>
</g>
</symbol>
</svg>
<a href="you site">
<svg class="class">
<use xlink:href="#id"></use>
</svg>
</a>
How this look in CSS
.Header-logo {
display: none;
}
.devlogo-svg {
fill: #4d698e;
stroke: none;
position: fixed;
top: 13px;
left: 170px;
z-index: 10000;
max-height: 25px;
transition: .5s;
&:hover {
fill: #f00;
stroke: none;
}
}
@media (min-width: 768px) and (max-width: 991.98px), (max-width: 767.98px) {
.devlogo-svg {
display: none;
}
.Header-logo {
display: inline-block;
}
}
P. S dont forget delete fill and stoke propertys of SVG in redactor (propertys fill and stroke)🙂
P. P. S and change viewBox )
