How can i make my navigation bar stick to the top of my screen with css

Question

So i was creating a navigation bar for my website and it seems impossible to make it stick on the screen, its so confusing to me.

I followed Kevin Powell's tutorial on this but he didn't show how to make it stick to the top of the page.

Here is my HTML:

    <header>
        <div class="container">
            <h1 class="logo">Navigation</h1>
    
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </nav>
        </div>
    </header>

And here is my CSS:

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

header {
    background: rgb(155, 155, 155);
    border-radius: 0px 0px 25px 25px;
}

.logo {
    float: left;
    padding: 0px 0;
}

I had to shrink the css code a bit but the ul is not really important here.

Answer 1

Use position: sticky<\/code><\/a> and top:0<\/code> .

Answer 2

Simply just add this to your header tag CSS:

header{
  position: fixed;
  top: 0;
}

Answer 3

Just added some css of your nav.

nav {
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
}