Suggestion Is it possible to implement a header that hides until you scroll back up?

[grant]

Something like this?

Headroom.js - Give your pages some headroom. Hide your header until you need it.

Headroom.js is a lightweight, pure JS widget for hiding elements until needed. Give your pages some headroom

wicky.nillia.ms

 

[Russ]

You can add this to your xb_body template:

<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.12.0/headroom.min.js" integrity="sha512-9UsrKTYzS9smDm2E58MLs0ACtOki+UC4bBq4iK5wi7lJycwqcaiHxr1bdEsIVoK0l5STEzLUdYyDdFQ5OEjczw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var myElement = document.querySelector('.p-navSticky');
    
// construct an instance of Headroom, passing the element
var options = {
    // vertical offset in px before element is first unpinned
    offset : 800
};
var headroom = new Headroom(myElement, options);
// initialise
headroom.init();
</script>

And this to your extra.less:

.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

It'll add the headroom script on there.

 

[grant]

You are the best. I’ll try this out tomorrow

 

[grant]

Okay it works a dream! However, when I use the mobile bottom bar, it floats up when the top menu disappears.

(See photos)

Do you know if there’s a way to fix this?

 

[grant]

Obviously as soon as I posted this is started working fine so please ignore

 

[Russ]

Good to hear , let me know if you have any other problems with it.