- This topic has 5 replies, 2 voices, and was last updated 3 years, 5 months ago by Elvin.
-
AuthorPosts
-
October 20, 2020 at 3:24 pm #1497700Dwayne
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.
October 20, 2020 at 3:38 pm #1497712ElvinStaffCustomer SupportHi,
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
October 20, 2020 at 4:23 pm #1497728DwayneYes, 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 LogoOctober 20, 2020 at 5:39 pm #1497760ElvinStaffCustomer SupportOh 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.
October 21, 2020 at 2:52 pm #1499003DwayneThis 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!
October 21, 2020 at 6:11 pm #1499115ElvinStaffCustomer SupportCorrection:
Appearance > Customize > Site Identitybut 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.
-
AuthorPosts
- You must be logged in to reply to this topic.