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

Keep Menu While Scrolling

Question

4 answers to this question

Recommended Posts

  • 0

Hi @etspaulding. Could you provide a link to the site/page in question (for trial sites, see here). Since your style settings may be a factor, a link to the site/page makes it easier for others to write and test a quality answer.


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
  • 1

Here you are. Insert this via the CSS Editor:

@media only screen and (min-width: 767px) {
    #header {
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: #F0F4F4;
    }
}

A few notes:

  • This doesn't affect the mobile header/navigation. To do that properly, you'd need to use JavaScript.
  • If at some point your body background color becomes different than your header color, things would get more complicated.
  • The code above will work in modern browsers, but not older ones. Older ones will simply have the non-fixed header (not a big deal).

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

Create an account or sign in to comment

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


×
×
  • Create New...