Add SVG Logo like this site

Hi there,

You would basically need to rebuild the logo structure using the inside_navigation hook:
https://docs.generatepress.com/article/generate_inside_navigation/

https://docs.generatepress.com/article/hooks-element-overview/

Hey,

I am not good at this, kindly guide me :)

Try something like this as your hook content:

<div class="navigation-branding"><div class="site-logo">
    <a href="https://cliffyb.com/" title="cliffyB" rel="home">
	SVG CODE HERE
    </a>
</div></div>

Thanks.

But how can I generate the SVG code? I have an SVG image.

Also, doing this will also improve my pagespeed, and after doing this I have to remove the current logo from the customizer?

Lastly, what about the height and width of the SVG logo?

Thanks

But how can I generate the SVG code? I have an SVG image.

This isn't a theme-specific question so I'd recommend Googling for some instructions.

Also, doing this will also improve my pagespeed

I don't think you will see a difference there but not sure either.

and after doing this I have to remove the current logo from the customizer?

Yes

Lastly, what about the height and width of the SVG logo?

Might need some CSS tweak but can you add the logo in first?

Kindly check the logo I adjusted the height but its too small

Resolved

Glad to hear :)