Once I scroll down, how do I get my navbar to stay at the top of the page?

Question

I'm making a portfolio website and I've run into an issue I need help with. It's a single page parallax site. When the user enters text appears saying welcome, the nav bar is out of site.

Once the user scrolls down to see the rest of my page the nav bar appears. I would like to nav bar to stay at the top of the page once the user scrolls down enough to the point where the nav bar gets to that position. Basically how this website does it http://findmatthew.com/.

I have tried wrapping the nav bar in a new div and using position: sticky, top: 0; but the styling of the nav bar disappears.

body {
    margin: 0;
    background: #222;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
  background: #1f2733;
  margin-top: -22px;     /* <<<--- This moves the entire nav box up or down!!  */
}

header::after {
  content: '';
  display: table;
  clear: both;
}

nav {
  float: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

nav li {
  display: inline-block;
  margin-left: 190px;
  position: relative;
    font-family: 'Montserrat', sans-serif;   /*Changing the font of the nav bar*/
}

nav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
}

nav a:hover {
  color: #a23131;
}

nav a::before {
  content: '';
  display: block;
  height: 3px;
  background-color: #a23131;
    margin-top: -10px;
  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

use this example and add css anitation: https://codepen.io/JGallardo/pen/lJoyk — Mohit Gupta, Feb 19 '19 at 07:14
I believe "position: sticky" is what you are looking for. Beware that it is not compatible with older browsers (like IE). — Krunx, Feb 19 '19 at 07:15
> I have tried wrapping the nav bar in a new div and using position: sticky, top: 0; but the styling of the nav bar disappears. — Insane__Knight, Feb 19 '19 at 07:18
Possible duplicate of [How to fix a header on scroll](https://stackoverflow.com/questions/19158559/how-to-fix-a-header-on-scroll) — Mohit Gupta, Feb 19 '19 at 07:19

score -1 · Answer 1 · answered Feb 19 '19 at 07:22

-1

/* The navigation bar */

.navbar {

  overflow: hidden;
  
  background-color: #333;
  
  position: fixed; /* Set the navbar to fixed position */
  
  top: 0; /* Position the navbar at the top of the page */
  
  width: 100%; /* Full width */
}

answered Feb 19 '19 at 07:22

Emmanuel

1
3

There was no need to create snippet. – Abhishek Pandey Feb 19 '19 at 07:22

score -1 · Answer 2 · answered Feb 19 '19 at 08:01

-1

nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

answered Feb 19 '19 at 08:01

James

1
2

Once I scroll down, how do I get my navbar to stay at the top of the page?

2 Answers2