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

Keep Title & Navigation at Top when scrolling

Question

I'm using the Mentor template and want to keep the menu bar at the top of the screen as I scroll down. I've tried a variety of CSS codes I've found online but can't get any to work. Any help would be amazing! 

Share this post


Link to post

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)

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

I understand. That does get a bit more complicated, requiring JavaScript (see previous answer). It's possible someone may come along and provide some more advanced code for you.


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

Share this post


Link to post
  • 0

hi @brandon I just had a look at your fixit website and am interested in your fixed menu code. Just to let you know your demo site link is broken (the link that says "Here’s an example site with Fixit added." I would like to see the demo. Can you send it on please?

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...