What's wrong with my code?

Hard to tell as you do now show any html. So I'll point you to a tutorial...

This video shows you the stick navbar + more: Easily change sticky nav styling on scroll - YouTube[^]. Your answer is in the first 60 seconds:

{
    position: sticky; /* fixed; */
    top: 0;
}

Look at his html. That is important too:

<header>
    // navbar goes here...
</header>

<main>
    // page code goes here
</main>

You could have a sidebar, footer, etc, all of which could be inside/outside of main, but donot contain the header.

Watch the video, see what he is doing. I have a feeling that you will want the next part.

:) Which is why I questioned the 'fixed' property, should be 'sticky' - <pre data-showheader="false">{
    position: sticky;
    top: 0;
}