[Support request] Transparent, static header with logo/colors swap after scroll (no shrinking)

[AMBTL]

Hi,

I am interested in the same thing as Paul in this thread:

https://generatepress.com/forums/topic/un-hacky-sticky-menu-for-header-nav-on-desktop/

I built my first GP with a static header using this code

`.custom-fixed-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}

.custom-fixed-header + * {
padding-top: 80px;
}`

It works, for the most part, but I agree with Paul that it was hacky… and oh, man, it took quite a lot of work to compensate the paddings/margins on the main container/page headers in various layouts.
Also, if the visitor has e.g. the SEOquake plugin in the browser, the whole thing will break…

So, it’s certainly interesting to read that there is also this new method now:

https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

I will test it soon when I build the next site.

However, I am mainly interested in achieving a transparent, static header with logo/colors swap after scrolling. This is probably the only way to have a white header after scroll. You need a bright logo to stand out from a transparent photo header (which usually is kind of dark) and a dark logo if the header after scroll is bright. Only if the header after scroll is very dark you may not need to swap the logo.

Something like this:

https://avada.theme-fusion.com/health/
https://kriesi.at/themes/enfold-2017/
https://avada.theme-fusion.com/charity/

Looks good, doesn’t it?
I suppose this is currently impossible in GP, but maybe I am wrong.
GP is my favorite theme now, but goodness me, how I dislike the site header setup…. Actually, ‘dislike’ is an understatement…

The new Page Headers in GP were an absolutely brilliant update, a killer feature… I always hope that we’ll get better site headers in another brilliant update…

I don’t want to use Avada again or other themes from ThF.
As far as I can tell, Ocean and Astra offer that functionality out of the box… But I wouldn’t want to switch to them… I like pretty much everything about GP except that site header….
Personally, I find shrinking headers very ugly and don’t think I will ever use them.

Or perhaps there is already a way to achieve a transparent, static header with logo/colors swap after scroll? (no shrinking stuff)
If not, are there chances that it will come to GP? Or should I rather look into alternative themes?

In GP, I can achieve everything I want below the site header, and I love it, but the site header is so limiting…

Cheers
Tom

[Tom]

Hi Tom,

You should be able to achieve that quite easily. The hardest part is switching out the logo on sticky, but there’s a function for that.

To achieve the transparent menu, you can use the Page Header module:
https://docs.generatepress.com/article/merging-the-page-header-site-header/

Then to achieve the different navigation logo on sticky vs not, this should do it: https://generatepress.com/forums/topic/change-logo-media-source-file-when-sticky/#post-304545

Let me know if you need more info 🙂

[AMBTL]

Thank you very much Tom. I should be able to test it in a couple of days/weeks on a new site.

But how can the menu font colors can be swapped too? Initially, the font should be white, but after scroll when the header is white, the font should be dark. Will there be another css class after scroll that can be seen in Inspector? If there are different css classes before/after scroll then it would be indeed quite easy.

Cheers,
Tom

[Tom]

The sticky navigation colors will inherit the regular menu colors.

Then the Page Header settings allow you to set different navigation colors for your merged header.

[AMBTL]

Hey Tom,
I tried that action and it didn’t work as expected. Yes, it swaps the logo, but it creates a sibling div of “site-logo”, they float left, so the after-scroll logo appears in the middle of the header, between the normal site logo and the menu. There are 3 sibling divs with logos as children of “inside-navigation”.

Perhaps there is a simpler way, I have figured out that “Site Logo” is the logo before scroll and “Navigation Logo” is the logo after scroll. The menu colors can also be easily swapped.

So now I have sticky navigation, menu float right, logo float left. The logos and colors are nicely swapped. The only issue now is eliminating that ‘shrink and jump’ effect in sticky and “syncing” the margins and paddings between before and after scroll. I suppose finding all the right classes and adjusting the paddings/margins would be possible but quite time-consuming. But perhaps there is an easy way?

I’ve read in another thread that you are re-writing the sticky header… If only the sticky header could inherit the sizes and paddings from the normal header, that would be great.

For what it’s worth, the site header set-up is the only thing that keeps me from writing a 5-star review in the WP repository. This site header gives me too many headaches… Let’s have a simple, classic static (fixed) header with an easy set up and no shrink-and-jump action, and I promise a 5-star review 🙂

Page headers, on the other hand, are absolutely fantastic, a killer feature:)

Cheers,
Tom

[Tom]

Any chance I can see what you have so far? I’m not sure I’m understanding the site logo issue.

The sticky navigation shouldn’t shrink at all, as long as the sticky navigation height doesn’t have a value: Customize > Layout > Sticky Navigation.

Let me know – I’m sure we can get it looking how you want it 🙂

[AMBTL]

Can I send you a link privately? This site is not meant to be seen by general public yet, because there is only an experiment with static/transparent GP headers.

I removed that value from sticky navigation, but that is not the issue. The issue is that this concept of “navigation” has its own paddings, margins, logo sizes that are completely different than in the normal site header. I have a full-width site header, logo on the left, menu floats right.

Using this ‘navigation’ as an “after scroll” header replacement after scroll seems ‘hacky’ to me.
However, because some of its settings (colors) are in the legacy page header metabox, it can indeed be conveniently adapted for every page/post.

But making it match the regular site header with all the paddings and margins is a nightmare. When I built my first GP site, almost a year ago, this is what I did to achieve a fixed header. It took me hours to find all the classes and adjust the paddings and margins. It worked, but on the next day an update came, which rearranged the site header and it turned out that all my work had been in vain. Then I found the hack with .custom-fixed-header.

It’s kind of disappointing that static headers are still not natively supported in GP. I know a couple of popular themes and they all offer such headers out of the box, and the set up takes only a few minutes.

I really wish there was a concept of “after-scroll headers” instead of “navigation as a replacement for the site header” in the page-header metabox. By default, “after-scroll header” should have the same layout, logo size, paddings as the “before-scroll header” with options to adjust the colors (or even height if someone wants to shrink it). That would be perfect (and this is how some themes do it).

Is there some cheat sheet how to make the “navigation” match the site header with its paddings/margins?

Cheers
Tom

[Tom]

You can edit your initial post and add the URL to the URL field (it’s private). Or you can use our contact form to send it to us (just mention this post).

We don’t have a native sticky header option because usually headers are way too tall to be sticky. Taking up that much screen space is typically really bad UX, especially with people using smaller screens more these days (phones, tablets etc..).

To prevent the big change between a tall header and smaller sticky navigation, we typically suggest just making your navigation your header: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

I’ll be happy to take a look at your site and work out something custom for you though 🙂

[AMBTL]

Thanks Tom, I got it working… more or less.

I don’t think that is bad UX, the height of the static header can be adjusted via media queries for different screens, and this is what I will do.

Your sentence about “making the navigation your header” was the crucial tip… If someone finds this thread later and is interested: one must do .site-header {display: none;}, remove both logos from the customizer and add them only through the php action from the link. They won’t link automatically to the homepage, so they should also get … around them. Then they should get {position: absolute;} with top and left settings to position them where you want them.

This way it works quite nicely, and the key issue is indeed forgetting about the “regular” site header and managing it through the navigation concept. Perhaps not the most intuitive or straightforward way to achieve it, but as long as it works, it’s good enough for me. Quite happy that it can work this way.

But I have a weird glitch. It only happens in Chrome, all other major browsers are fine. And it only happens on my desktop and 27 inch monitor, it doesn’t happen in Chrome on my laptop. And it only affects longer pages, short pages are fine. What happens: after scrolling up to the top, the navigation won’t return to its transparent state, it remains white. It is transparent initially, then you scroll down it gets white as it should, and when you return to the top, it won’t get transparent again. Two WordPress installations, elementary plugins only (WordFence), no errors in the console. I added a link to an example page.

What’s even weirder, if I set sticky transition to e.g. fade (I’d like no transition animation), the problem goes away on long pages (it returns to the transparent state), but instead on some shorter pages the navigation is no longer sticky and disappears when scrolling down (the same short pages switch colors when no transition is activated).

I tried leaving the transition setting on and modifying it through css to remove the animation, but cannot find it in the DOM.

You mentioned that you would re-write the sticky navigation. Do we still have the old version or is it the new one, and could it be somehow related?

Everything works very nicely for me in FF, Edge, even IE, but somehow Chrome has problems and perhaps only on high resolution displays.

Cheers
Tom

[Tom]

This is the second time I’ve heard of that bug on larger monitors. We haven’t re-written the sticky navigation get, but it is a priority as we’d like to ditch jQuery.

Is your site experiencing this bug right now? If so I’ll get my hands on a larger monitor and will try to figure it out.

Thanks for all the feedback!

[AMBTL]

Yes, I switched off sticky transition, so the bug is visible. There are three pages in the top menu. “Test” is short and doesn’t display the bug, but the scroll amount is similar to the height of the navigation. “Test 2” and “Test 3” display the bug.

I use a 27 inch UHD monitor, my viewport is 2195 × 1104. At first, I thought some Chrome extension was causing it, but then I started with a clean profile and it was the same.

If it’s going to be re-written, I suppose there is a great chance that it won’t be an issue afterwards. Which would be cool, because now, after figuring it out, I like the way it works and looks.

Cheers
Tom

[AMBTL]

What’s interesting: I just tried zooming in Chrome. Zoom level 125% and up (viewport: 1756 × 883 or lower) makes the bug go away. Zoom level 110% or below and the bug returns.

[Tom]

Thanks for this – I’ll dig into it and will let you know 🙂

[AMBTL]

Hello Tom,

do you still need access to this demo?

If not, I would like to switch on maintenance mode (or deactivate this site for now). If you still need it, I will leave it as it is, no problem.

Cheers
Tom

[Tom]

You can turn it off for now. If I need it once the sticky nav begins its rebuild, I’ll update this topic.

Thank you! 🙂

[Author]

Posts