[Resolved] Filter Title to use SVG inline to replace Logo & Title

[Sebastien]

Hi,

I would like to replace the logo I use (Customizer > Identity > Logo) by a SVG inline.
I’ve tried to write my code <svg> through Customizer > Identity > Title but it doesn’t read the code format.

https://generatepress.com/generatepress-2-3/
There Tom answered me that I can easly do it using a filer.
So, I’ve tried:

add_filter( 'generate_site_title_output', function( $output ) {
	return sprintf(
		'<div class="testtt"><svg>xxxxxxxxxxxxxx</svg></div>',
		( is_front_page() && is_home() ) ? 'h1' : 'p',
		esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
		get_bloginfo( 'name' )
	);
}

but it doesn’t work.

Also The aim is to not display anymore original’s logo & title. But I don’t want to loose any markup (for SEO) that the theme could send (to google, …) . I’m not sure how WordPress or Theme use these datas. That’s why I would like to be sure this hack wont decrease my SEO.
1) Can you correct my code ?

2)Alternativly, I would like to use 2 filter: Once to replace the .header-image content by my own svg inline content. And a second to replace the .main-title content by my own svg inline content.
Thanks

[Tom]

Hi there,

Try this:

add_filter( 'generate_logo_output', function( $output ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				YOUR INLINE SVG CODE HERE
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
} );

Let me know 🙂

[Sebastien]

Thanks Tom,
it works =)

But I meet a CSS problem with SVGs, I would like le DIV “site-logo” perfect fits with the SVG automaticly.
I’ve tried with inline-block but I don’t success…

.site-logo svg {
	width:100%!important;
 margin:0!important;
}
.site-logo  {
	display:inline-block!important;
 margin:0!important;
}

The problem is that the width of the div site-logo is wider than the SVG =/
Can you have a look?
my website is into the main post.

thanks

[David]

Hi there,

i think the issue is with your SVG – if you look at your markup you will see the viewBox dimensions, which are the same aspect ratio as the container. You would need to edit your original SVG to make sure there is no negative space around the image.

[Sebastien]

Thanks to pointing me that.
I get a last display error:

It seems the size is correct into Chrome; Mobile; but Firefox desktop pc seems to be really bigger.. 😮
any idea?

.site-logo {
	text-align:left;
}
#Logo-title  {
	vertical-align:middle!important;
	width:40%!important;
	position:relative;
	left:1rem;
	
}
#Logo  {
	vertical-align:middle!important;
	width:10%!important;
}

thanks

[David]

The simplest fix would be to not use %’s instead use PX’s to define an exact size.

[Sebastien]

So, I’ve just tried but every time I use: px or em or rem, the primary menu position is impacted. When I use % whatever the size I choose, the primary menu (to the right) doesn’t move..
I could also change the position of the primary menu, but I also have to manage my sticky menu, and my mobiles views… that seems a bit hard.
Are they any other way to fix it? =/

[David]

Try giving the two elements a PX height property. That should stop FF from just filling the available container space.

[Sebastien]

Thanks for the help.

So, I still have issue with firefox:
I can now adapt the size of the icons into all browers (by giving height properties). However, if I stop using: width:10%!important; into #Logo I lost the space between SVGs and the main nav menu (using Chrome), and the same code has not effect with FireFox.

.menu-primary-menu { 
	height:60px!important;
}
.site-logo {
	text-align:left;
}
#Logo-title  {
	vertical-align:middle!important;
	height:40px!important;
	position:relative;
	left:1rem;	
}
#Logo  {
	vertical-align:middle!important;
	width:10%!important;
	height:60px;
}

Maybe it is a bad idea, but could adding another DIV next the Title and before primary menu help?

Thanks

[David]

The inside-navigation is a flex box, so you can give the .site-logo a margin-right: auto; property to push the nav away from it.

[Sebastien]

Thanks you so much David, it works ! 🙂 I’m looking for a quick CSS course / book or video for learning basics. Any chance you could advice me one?

Bye

[Leo]

I used this site to start and it was excellent:
https://www.codecademy.com/catalog/language/html-css

[Rafał]

Hi!
How to do the same (add_filter to use inline SVG logo) in mobile header, and sticky navigation?

[David]

Hi there,

there are other filters for those:

Nav logo:
https://docs.generatepress.com/article/generate_navigation_logo_output/

Mobile header logo:
https://docs.generatepress.com/article/generate_mobile_header_logo_output/

[Rafał]

Thank you, David!
Although nav logo filter does not work for me.
[Menu Plus is active.]

[Author]

Posts