plain CSS to Keep the nav on top of the page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- To place the footer at the bottom of the page -->
        <style>
            html,
            body {
                height: 100%;
            }

            #root {
                min-height: 100%;
                display: flex;
                flex-direction: column;
            }

            header {
                position: absolute; /* To pull the header out of the document flow */
            }

            main {
                flex: 1;
            }
        </style>

        <title>Document</title>
    </head>
    <body>
        <div id="root">
            <header>
                <h1></h1>
                <nav></nav>
            </header>
            <main></main>
            <footer></footer>
        </div>
    </body>
</html>

Let’s say h1 and nav is placed within header tag and this would look like below:

enter image description here

What I want to achieve is keeping the nav tag on top of the page while the h1 tag is being scrolled as usual:

enter image description here

I’ve tried adding position: sticky; and top: 0;, but it doesn’t seem to be working as the nav tag is placed within the header tag.

Should I be using JavaScript to achieve this? or is it possible to solve with plain CSS only?