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

How make the navigation menu/bar stick at the top of the screen while scrolling



Site URL: https://www.jeffreyzie.com/nextdoor

Hey guys, 

I'm looking to make the navigation bar stick at the top of the website anytime someone scrolls on the site. I'm mainly looking to do this so that the shopping cart is always in view while a visitor is scrolling down the site.

Is there a way to make this happen? 

Thank you

Creator of ivorycolors.net & stoplitteringtoday.org

Link to comment

2 answers to this question

Recommended Posts

  • 0


If you're using a 7.1 Template. You can do this by navigating to any page, click "Edit", and select "Edit Site Header". The menu will allow you to change the toggle switch for "Fixed Header" on or off.

If you're on version 7.0 using a compatible template family, you should be able to add the following code using the Custom CSS tool. Navigate from Home > Design > Custom CSS and paste the code below:

// Fixed Header //

.Header { 
  position: fixed;
  z-index: 9999;
  width: 100%;

-- Courtesy of Ghost Plugins.

Hope this helps!


Link to comment
  • 0

Fixed will make header overlap main content. You can also use sticky

.Header.Header--top {
    position: sticky;
    top: 0px;
    z-index: 1000;
    width: 100%;
    box-shadow: 0px 2px 3px rgb(0 0 0 / 10%);


Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...