NEED HELP WITH CUSTOMISING HEADER

Site URL: https://briannaughton.uk

Hi there, I'm really hoping someone can help me out - total newbie with custom CSS!

I'm using a Brine 7.0 template. The header currently disappears when you scroll down the page, which I partly like. I found some code online which works for fixing the header (sticky header) but I basically want the best of both worlds, so that the header only appears if the user starts scrolling back up again.

This is a menu option for 7.1 but not 7.0

7.1 menu option instructions:

Click to the STYLE tab, then turn on Fixed Position using the toggle button. Make sure the next toggle underneath (you may have to scroll a bit) for Fixed Header Style is set to Basic. This means the header is visible at all times. If you instead select Scroll Back, the header is only visible when you start reverse scrolling the site back toward the top.

___________

It's the last bit of that - the 'scroll back' option that I want to use.

The code I injected that works to fix the header at the top (make it sticky) is below (I have currently removed it from the site until I can figure out part 2 to the problem)

/* Fixed Header */

Header {

position: fixed;

z-index: 9999;

width: 100%;

top: 0px;

}

.Content-outer {

margin-top: 50px;

}

I guess there's an "if/then/else" component to it that I need to deploy but like I said I'm a complete newbie, if anyone has a workable solution I'd be delighted and very grateful!

Thanks in advance,

Brian