how to fix my position sticky with navigation bar problem

Question

I'm building a responsive website with a header above the navigation bar and my goal is then of course to have the navigation bar stick to the top when scrolling down.

I'm new to HTML and CSS , so I'm not really sure if the order in what should be in the top of the CSS class code for the navbar should be. But just in case I've put position:sticky; at the top and then the top:0; value second to that. I've also tried to put it directly in the head. But to no avail. I'll include the code for you to see.

 .navbar { position: sticky; top: 0; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; background-color: black; height: 74px; overflow: hidden; margin: 0px 1px 0px 1px; border: 1px; border-radius: 4px; border-style: solid; border-color: #A6A6A6; }

 <nav> <div class="navbar"> <a href="#"> <button class="btn text1">Text 1</button> </a> <a href="#"> <button class="btn text2">Text 2</button> </a> <a href="#"> <button class="btn text3">Text 3</button> </a> <a href="#"> <button class="btn text4">Text 4</button> </a> <a href="#"> <button class="btn text5">Text 5</button> </a> </div> </nav>

Answer 1

Make the navbar class fixed. It will stick it there. Either way it wont stick. Example;

 .navbar{ position: fixed; top: 0; }

Answer 2

Add position:sticky to the parent. (Also make sure you always check for browser compatibilty )

nav {
 position: sticky;
 top: 0;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;    
  background-color: black;
  height: 74px;
  overflow: hidden;
  margin: 0px 1px 0px 1px;
  border: 1px;
  border-radius: 4px;   
  border-style: solid;
  border-color:#A6A6A6;   
 }

Working fiddle: https://jsfiddle.net/9fvwp7x1/5/