Absolute Positioning making my icon disappear?

HTML-CSS
1

I’m following a tutorial for a interactive navigation menu but as soon as I add the

position: absolute;
   right: 0;
   top: 0;

under .navigation , the menu disappears.

<header>
    <div class="navigation">
        <div id="links">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="projects.html">Projects</a>
            <a href="brands.html">Brands</a>
            <a href="contact.html">Contact</a>
        </div>
      
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars" id="burger"></i>
        </a>
    
    </div>
</header>

.navigation {
    overflow: hidden;
    background-color: white;
    position: relative;

}

.navigation #links {
    display: none;

}

.navigation a {
    color: black;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

.navigation a.icon {
    background: white;
    display: block;
   position: absolute;
   right: 0;
   top: 0;
}

.navigation a:hover {
    background-color: none;
    color: grey;
}
2

can you make a codepen that illustrates the issue? (so we can play with the code)