[Support request] Generatepress Site Header Block Element – make sticky?

[Callum]

Hi,

I’m trying to make a custom header sticky.

I’ve found posts about a similar question (here) but I’m still a bit confused.

I made an element in Appearance / Elements
The type is Block – Site Header
Location: entire site

This has successfully replaced the built-in site header & menu with my custom header.

I’d now like to make the custom header sticky.

Problem 1: how to make it sticky?

Problem 2: Am I able to change the design when it goes into sticky mode? Shrink it and perhaps get rid of the tagline?

Thanks,

Callum

[Leo]

Hi there,

Problem 1: how to make it sticky?

.gb-container.gb-container-798bd2c6 {
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 99;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Problem 2: Am I able to change the design when it goes into sticky mode? Shrink it and perhaps get rid of the tagline?

Unfortunately not without a custom js or javascript solution.

Let me know if this helps 🙂

[Callum]

Hi Leo,

Thanks so much, that does work perfectly!

I’m going to work on a custom JS solution to restyle when it’s in the “stuck” position, but hoping you could point me in the right direction?

Doing a quick google I couldn’t find a clear way to check when an element is “stuck” to trigger the restyle using either CSS or JS.

I figure that’s a problem that you would have solved for creating GP, since it supports restyling the header when it’s in the “stucky position” so hopefully you can shortcut my research?

I’m happy to post the solution here for others if I come up with some code that works.

Cheers,

Callum

[Elvin]

Hi,

Doing a quick google I couldn’t find a clear way to check when an element is “stuck” to trigger the restyle using either CSS or JS.

Can you explain a bit more what you mean by “stuck”? If you mean the initial state, you shouldn’t start the header block element with “position:sticky” property by default/on page load.

You should add in position:sticky; or position:fixed; once you scroll down.

Here’s an example:

<script>
const stickyNav = document.querySelector('.gb-container.gb-container-798bd2c6');
var lastScrollTop = 0;

document.addEventListener("scroll", function(){ // or window.addEventListener("scroll", function(){
 var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop){ //not top of scroll
       if(!stickyNav.classList.contains('sticky-state')){ //if it is NOT in sticky state
           stickyNav.classList.add('sticky-state'); //add sticky state
       }
   } else if(st == lastScrollTop){ //top of scroll
       if(stickyNav.classList.contains('sticky-state')){ //if it is in sticky state
           stickyNav.classList.remove('sticky-state'); //remove sticky state
       }
   } else {
		console.log("scrolling up"); 
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
</script>
<style>
.sticky-state{
position:sticky;
}
</style>

What this does is, it adds a sticky-state class to the element indicated on const stickyNav when not on top most scroll and removes it when you’re on the top of the page.

The .sticky-state class has position:sticky; but you can change this to position:fixed; if you must.

Note: The code provided isn’t guaranteed to work out of the box. It’s just to give you a direction/idea to work on. 😀

[Callum]

Hi Elvin,
Thanks so much for that, much appreciated! Your response answers my question.

If I come up with any working code I’ll post back here.

Callum

[Elvin]

Hi Elvin,
Thanks so much for that, much appreciated! Your response answers my question.

No problem. Let us know. 🙂

[Author]

Posts