Different logo in nav bar -

Hi there,

i am not sure what you mean by: nav bar on the side can you explain ? Let me know

Sorry I wasn't clearer! I meant that the site logo is centered under the nav bar but it's a joint project and so the organization's logo should be level with the nav bar. I know how to do that with the site id logo but not a different one. Here's a photo that will hopefully made my explanation make sense.

So relieved you guys are still at work - I consider you essential!

Hi there,

Best way to do this is to:

1. Activate the Navigation as Header option: https://docs.generatepress.com/article/navigation-as-a-header/

2. Add a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/

In the Hook Element, add your secondary logo:

<div class="secondary-logo">
    <img src="URL TO YOUR SECONDARY LOGO" alt="" />
</div>

Then set the hook to after_header, and the Display Rules to "Entire Site".

3. Add this CSS:

.secondary-logo {
    padding: 40px;
    text-align: center;
}

Let me know if that helps or not :)

Thanks so much, Tom. That worked great! I endlessly admire how flexible this theme is! Just one thing is that the logo that is in the Hook doesn't center when on mobile view. And was wondering also if it could be made smaller for mobile view as well.
Best, Jana

Hi Jana,

Did you add the CSS I provided above as well?: https://generatepress.com/forums/topic/different-logo-in-nav-bar/#post-1243598

Let me know :)

Yes, it's written as this:
}
.secondary-logo {
padding: 10px;
text-align: center;
}

Also wondering if it could be made smaller for the mobile version.

You have this media query opened up further in your CSS:

@media (min-width:769px) {

However, you're not closing it (}), so it's applying all of that CSS to desktop-only, and likely breaking other CSS below it. You'll want to close that media query wherever the CSS ends for desktop-only.

To make it smaller on mobile, you can do this:

@media (max-width: 768px) {
    .secondary-logo img {
        max-width: 150px; /* adjust as needed */
    }
}

That worked perfectly - thank you! Now my last question regarding this - how do I get the extra logo (the only not in the nav bar) to link to the home page and the nav bar logo to link to a different website? Best, Jana

Your HTML would turn into this:

<div class="secondary-logo">
    <a href="URL TO YOUR WEBSITE HERE"><img src="URL TO YOUR SECONDARY LOGO" alt="" /></a>
</div>

For the nav bar logo, you'd need to add this PHP:

add_filter( 'generate_logo_href', function() {
    return 'URL TO OTHER WEBSITE';
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

That all worked perfectly - thanks!! What do I add to the php code to have the link open in a new window (I searched but couldn't find that for php).

Also, on underlining for links in body, I'm using this in the ccs:

}
.entry-content a,
.entry-content a:visited,
.entry-content a:hover {
    text-decoration: underline;
}
	.secondary-logo {
    padding: 10px;
    text-align: center;
    }
}

but I wondered if there was a way I could turn it off on buttons only? (I'm using Elementor).

Instead of the generate_logo_href filter, do this:

add_filter( 'generate_logo_output', function( $output, $logo_url, $html_attr ) {
    return sprintf( // WPCS: XSS ok, sanitization ok.
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home" target="_blank" rel="noopener noreferrer">
                <img %3$s />
            </a>
        </div>',
        'YOUR CUSTOM URL HERE',
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        $html_attr
    );
}, 10, 3 );

Can you link me to a page with one of those buttons?

Worked like a charm, of course! And there's no way I could have found that on the net!

The buttons are sub-nav buttons on each page like here:
https://kangaroosarenotshoes.org/kangaroos-101/

Thanks!

Try this:

a.eael-creative-button {
    text-decoration: none;
}

Is there nothing you guys can't solve? That worked beautifully - thank you!!! PS - I tried to give you another review on wp but it would only let me edit my old review. Let me know if there's another place where I have review.