Unable to make elements dynamically sized and positioned with CSS.

I'm having trouble making the content in the top "nav bar" (the header in HTML) dynamic. I've done plenty of research, setting the width of the parent so that margins work properly, using the top and bottom properties, using the clear and float properties, but nothing seems to work. I'm fairly new to web design and css so I apologise if my code isn't the cleanest. I essentially want the header to be dynamic and everything inside ( including the icons and logo) to resize according to the browser dimensions. I aimed to do that using % as width or the vh unit but it didn't work. Help!!

TLDR: Cant move links inside the menu class or the icons on the right to be dynamic

       <header>
            <div class = 'nav'>
                <img class = "logo" src="assets/images/LogoSmall.png" alt = "LOGO">
                <nav>
                    <ul class = "menu">
                            <li><a href="pages/blog-posts.html">BLOG</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </nav>
                <i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
                <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
                <i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
                <i class="fa fa-linkedin fa-2x" aria-hidden="true"></i>
                <i class="fa fa-github fa-2x" aria-hidden="true"></i>

            </div>
        </header>

CSS for said HTML:

 .nav{
    position:fixed;
    height: 10%;
    background-color: white;
    width: 100%;
    top:0;
}


/* FIX THE BLOODY MENU BECAUSE IT DOESNT WORK WHEN RESIZEDx*/

.menu > *{
    display: inline-block;
    top:0;
}
.menu li a {
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    color; black;

}


/* nav*/
.nav > i{
    float: right;
    margin-right: 1.75%;
    margin-top: 2%;
    font-size:30px;
    font-size: 3vh;
}
.logo{
    width: 25%;
    margin-top: 0.6%;
    margin-left: 0.6%;
    display: inline-block;
}
.fa-2x{
    border: 3px solid #FFFFFF;
    padding: 3px;
}
.fa-2x:hover{
    border: 3px solid black;

}

https://jsfiddle.net/zfn9uw98/6/