[Resolved] Different logo in nav bar –

Home Forums Support Different logo in nav bar –

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1240861
    Jana

    I couldn’t find any documentation on putting a different logo in the nav bar on the side. Is there a ccs code for that? I found the one for the site logo only. Thanks for you help.

    #1241353
    David
    Staff
    Customer Support

    Hi there,

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

    #1243099
    Jana

    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.

    logo on level with nav bar

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

    #1243598
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1246891
    Jana

    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

    #1247308
    Tom
    Lead Developer
    Lead Developer
    #1247775
    Jana

    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.

    #1248556
    Tom
    Lead Developer
    Lead Developer

    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 */
        }
    }
    #1249199
    Jana

    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

    #1250028
    Tom
    Lead Developer
    Lead Developer

    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/

    #1251564
    Jana

    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).

    #1252331
    Tom
    Lead Developer
    Lead Developer

    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?

    #1254234
    Jana

    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!

    #1255237
    Tom
    Lead Developer
    Lead Developer

    Try this:

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

    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.