Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Keep Title & Navigation at Top when scrolling


AWC914

Question

5 answers to this question

Recommended Posts

  • 0

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.

-Brandon

 

Edited by brandon

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

Link to comment
  • 0

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...