how to fix my position sticky with navigation bar problem - html

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

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/

Answer 2

Make the navbar class fixed. It will stick it there.
Either way it wont stick. Example;
.navbar{
position: fixed;
top: 0;
}