Site branding using text in sticky menu

Hi there,

You can use the GP Hook: generate_inside_navigation

Which is available in the Elements module hooks as inside_navigation.
So you could use this to add your content and then use a little CSS for formatting and hiding it when its not sticky. Let me know.

Hi David,

Thank you for your reply.

Can you please guide me through the code I have to load using that hook? I'm not sure I'm following your idea.

Thanks.

Just to confirm:
You want to add your Site branding in the sticky navigation instead of a navigation logo?

Yes, the idea is having the common word-based site branding, since the project logo is word based, which means we won't need to load an image for it.

Is it possible?

Are there any disadvantages?

Thanks.

The only disadvantage would be if the client cant grab the google font, meaning it would default to the browser stack font. Personally i would use an SVG logo with the font converted to curves.

However here is the code you would use to automatically pull the site title:

Create a new Element > Hook and add this code to the content:

<div class="sticky-brand site-branding">
	<p class="main-title" itemprop="headline">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
	</p>
</div>

Assign it to the inside navigation hook and set your display rules to entire site.

This will pull in the site title and link. We then need to hit it with some CSS. If you can share a URL to the site ( you can edit your original post and use the Site URL field for privacy) I can work through that.

Yes, I see your point about Google Fonts being somehow blocked to the client.

If I follow your suggestion and use SVG instead, what would I need (beside the SVG file)?

As to the CSS, I can't show you an URL yet, it's being locally developed.

Thanks.

For SVG to work in WordPress you will need a plugin. Either:

https://wordpress.org/plugins/safe-svg/
https://wordpress.org/plugins/svg-support/

You need a little CSS as the SVG needs some sizes. Its all covered here:

https://docs.generatepress.com/article/adding-svg-logo/

Nice. I'm going to follow this links to see if I can manage and follow your suggestion.

Thanks David.

PS: marking this as resolved, I'll get back to it if I decide to try the font approach.

You're welcome :)