[Support request] Sticky Menu Logo Change – (Elements – Site Header – Merge)

Home Forums Support [Support request] Sticky Menu Logo Change – (Elements – Site Header – Merge)

Home Forums Support Sticky Menu Logo Change – (Elements – Site Header – Merge)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1497700
    Dwayne

    I’m running a site using Polylang.
    Using the HEADER element, I have header logos set to display for a certain language.

    It mostly works great. However…

    When using HEADER element, one cannot specifically set the STICKY MENU logo (you can set Site Logo, Retina Logo, Mobile Header Logo).
    Thus, it defaults to displaying one of those logos (set in the HEADER Element config) in the STICKY MENU.

    However, if one sets that HEADER element to MERGE, then it does not use one of the set 3 logos, it uses the site default logo.

    Can the option to specifically set that logo in HEADER elements be added?
    Is there a reason why MERGE causes the wrong logo to display?

    I don’t have an image set for ‘stick navigation logo’ – thus, it defaults to the site logo as expected – except on pages with MERGE on.

    #1497712
    Elvin
    Staff
    Customer Support

    Hi,

    Can the option to specifically set that logo in HEADER elements be added?
    Is there a reason why MERGE causes the wrong logo to display?

    When you set the “Merge with Content” to merge on the site content, you must set its own logo as shown here: https://share.getcloudapp.com/2NujvkyD

    Read more about Header Element’s Site Logo here: https://docs.generatepress.com/article/header-element-overview/#site-logo

    #1497728
    Dwayne

    Yes, maybe I wasn’t clear.
    I *HAVE* set all three of those logos.
    But, when set to MERGE, the logo in the STICKY NAV is incorrect for that page.
    When MERGE is off, the logo in the STICK NAV is correct for that page.

    There is no option to set that logo and the functionality when ‘merge’ is set is not as expected.

    There are FOUR logos that GeneratePress can set:

    Site Logo
    Retina Logo
    Mobile Nav Logo
    Sticky Nav Logo

    #1497760
    Elvin
    Staff
    Customer Support

    Oh right my bad.

    The sticky nav bar is a completely different entity from the nav bar from the merged one from Header Element.

    This sticky nav bar uses the logo set on Appearance > Customize > Site Identity. This means we can’t conditionally set what logo displays on the sticky nav bar for different languages through the UI.

    That said, consider this workaround:

    Keep the 2 Header Elements you’ve created.

    Disable the sticky navigation on the customizer and add this css:

    #site-navigation {
    	z-index: 100;
    	margin-top: 0px;
    	position: fixed;
    	top: 0px;
    	width:100%;
    }

    The merged navigation should be sticky while keeping the logos.

    But the downside of doing this is, the navigation won’t have the similar animation you see when you enable sticky navigation on the customizer.

    #1499003
    Dwayne

    This sticky nav bar uses the logo set on Appearance > Customize > Site Identity. This means we can’t conditionally set what logo displays on the sticky nav bar for different languages through the UI.

    I mean, I’m literally using elements to conditionally set what logo displays on the nav bar for different languages. And it works great *except* for when merge is set to ‘on’. You can see it in action at the domain linked earlier.

    I’d even go so far as to call it a bug: it doesn’t use the logo defined in ‘Site Logo’ as expected.

    I’ve gone ahead and disabled the merge (thus losing the ‘full screen’ option) and will just get by with general padding.

    On a related note: how can I get the sticky menu height to be *shorter* than the initial primary nav?
    (should I make a separate topic?)

    Thanks for looking into these!

    #1499115
    Elvin
    Staff
    Customer Support

    Correction: Appearance > Customize > Site Identity but Customize > Layout > Sticky Navigation. My bad.

    But yeah that something to look into. Perhaps it is a bug. We’ll have Tom look into it.

    On a related note: how can I get the sticky menu height to be *shorter* than the initial primary nav?
    (should I make a separate topic?)

    We can make the sticky nav menu to appear “shorter” by decreasing the height of its contents.

    You can try these CSS codes:

    .menu-bar-item.slideout-toggle > a {
        line-height: unset;
    }
    @media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px){
    .main-navigation.sticky-navigation-transition .navigation-branding img {
        height: 50px;
    }
    }

    What this does is, it reduces the height from the menu toggle button and the logo as their the main elements affecting the sticky nav’s height.

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