[Resolved] Site branding using text in sticky menu

Home Forums Support [Resolved] Site branding using text in sticky menu

Home Forums Support Site branding using text in sticky menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #661011
    Alvaro

    Hi,

    I’m doing this client site which uses a Google Font as a word logo. Therefore, I don’t have to load any image, I can just define this font and apply custom CSS to .site-branding.

    But what about the sticky menu? It works only with an image logo? Can it be done with the usual <h1 class="main-title" itemprop="headline"> and mimic the regular text-logo?

    Thanks.

    Álvaro

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #661060
    David
    Staff
    Customer Support

    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.

    #661064
    Alvaro

    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.

    #661077
    David
    Staff
    Customer Support

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

    #661078
    Alvaro

    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.

    #661093
    David
    Staff
    Customer Support

    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.

    #661095
    Alvaro

    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.

    #661098
    David
    Staff
    Customer Support

    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/

    #661100
    Alvaro

    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.

    #661253
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.