How do I create a navigation bar with a logo and hamburger menu without bootstrap

<header>
    <div class="container">
        <div class="clearfix">
            <div class="logo-div">
                <a href="#"><img alt="logo" class="image" src="https://via.placeholder.com/350x150"></a>
            </div>
            <div class="menu-div">
                <nav>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a class="active" href="#">Log in</a></li>
                        <li><a class="button" href="#">Sign up</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

/* top right bottom left*/

body {
    margin: 0;
    padding: 0;
    font-family: open sans; 
    background-image: linear-gradient(to bottom right, #FBFCFD, #E8EBF3);
        
}

header {
    padding: 25px;
}
    
nav { 
    margin: 0;
    padding: 0;
    text-align: center;
}

nav a {
    display: block;
    text-decoration: none;
    color: #6A6A6A; 
    padding: 0 25px 0 25px; 
}
    
nav a:hover {
    color: #6945FF; 
}


nav li { 
    font-size: 15px;
    display: inline-block; 
    list-style-type: none;
}

.image {
    position: relative;
    display: inline;
    height: 3rem;
}
    
.active {
    color: #6945FF; 
    text-decoration: bold; 
    font-weight: 600; 
}

.button {
    font-weight: 400; 
    color: white;
    padding: 7px 20px 7px 20px; 
    background: #6945FF; 
    border-color: transparent;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    border: 1px solid transparent;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    min-width: 5rem;
    transition: all 0.1s ease-in-out;
}
  
.button:hover {
    color: white;
    box-shadow: 2px 2px 2px #888888;
}


.hero {
    padding: 240px;
    text-align: center;
    font-size: 35px;
}

footer {
    padding: 30px;
    text-align: center;
    font-size: 35px;
}
   
.logo-div{
  float:left;
}
.menu-div{
  float:right;
}
.container{
  max-width:1140px;
   width:100%;
  margin:0 auto;
}
.clearfix{
  display:inline-block;
   width:100%;
}