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

Hello,

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!

-Dan

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%);
}

This is what worked for me:

.Header {
    position: sticky;
    top: 0px;
    z-index: 1000;
    width: 100%;
}