-
Hi everyone.
1st of all congratz for this new utility along with panels too. Well done & very good job. It was needed.
Although I’m trying to figure out how it’s possible to change the logo for the sticky header if I use the Site Header Gutenberg Blog.
Since I have a transparent header for the default I need to put the logo in white and keep the colored one in the sticky.
Is that possible somehow? I’ve searched in documentation but no info for different logos for sticky & non sticky
-
Hi there,
It is possible, though a bit tricky. Here’s how you can set it up:
1. Add both logos (sticky and non-sticky) inside the Site Header block.
2. Assign custom classes to each logo — for example,
nav-logofor the default logo andsticky-logofor the sticky version.3. Select the Site Header block, click Manage selectors, then edit the Sticky selector. Add this inside the selector field:
&.gb-is-sticky img.nav-logoSet its display to none.
4. Again, click Manage selectors, edit the Not Sticky selector, and add this:
&:not(.gb-is-sticky) img.sticky-logoSet its display to none (same method as in the video reference above).
This way, only one logo shows depending on whether the header is sticky or not.
Let us know if you run into any issues following these steps.
-
In that case I’m gonna just add a 2nd logo in my custom header block, since I don’t use any of generatepresse’s settings but I write code in files.
I thought to ask since I was wondering if there was an option that I missed. You should really think to put a feature for separate sticky logo in a future update.
-
In that case I’m gonna just add a 2nd logo in my custom header block, since I don’t use any of generatepresse’s settings but I write code in files.
Yes, that’s much easier for me personally as well. The method I outlined using the UI settings is a bit complicated, I wouldn’t use it myself either. We’ll see about improving this in future iterations, hopefully making it as simple as how the theme’s header handles it.
-
Just for if anyone encounters the same issue that I had I will explain my solution bellow:
I’ve put 2 img blocks inside the navigation.
For the 1st one I created a new Link attribute sticky with value off and for the second one attribute sticky with value on
Then in my css file (childtheme ofc)
.gb-site-header:not(.gb-is-sticky) a[sticky="on"] { display: none; } .gb-site-header.gb-is-sticky a[sticky="off"] { display: none; }Job done!
-
Great solution! 🙂
- You must be logged in to reply to this topic.