Jump to content

Keep Title & Navigation at Top when scrolling

Recommended Posts

  • Replies 5
  • Views 2k
  • Created
  • Last Reply

Hi @AWC914

It's relatively easy to get the header to "stick" to the top using position:fixed or position:sticky (for modern browsers only). Something like this usually starts to get the effect:

.Header {
  position: fixed !important;
  background-color: #DDDDDD;

However, depending on your configuration, they may only get you part-way. Furthermore, you may find additional complexities appear regarding top/bottom headers, announcement bar (in use, closed, open), whether you want it fixed on both desktop and mobile, whether you're okay with the nav. overlapping content (especially when on-page anchor links are used) and whether you want to make use of "on-scroll" effects such as a shrinking logo or color/transparency change.

So, if the above code doesn't get you there, you can check out a plugin I made to fix Squarespace Headers on Brine templates, or try posting a link to your site/page in question (and the view-only password for trial-mode sites). Someone may be able to help you out further, especially if you can speak to some of the factors I mentioned.



If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

Thanks Brandon. Ideally I'd like a background colour to appear once you begin to scroll as the nav links are white and disappear into the background of the site, as displayed in the screenshot. What you've provided above does stick the header to the top when scrolling though -- thank you 

Screenshot 2019-10-24 22.56.41.png

Link to comment
  • 3 weeks later...


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.