Jump to content


Recommended Posts

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,


Link to comment
  • Replies 0
  • Views 213
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.