How can I make the logo and the menu on the same line - menu

Question

I've just made my first responsive drop-down menu with a hamburger icon but can't seem to get the logo and the menu (both as a nav and as a icon) on the same line.
<nav>
<div class="container-fluid">
<a class="navbar-brand" href="<?php bloginfo('url');?>">
<img src="<?php bloginfo('template_directory');?>/images/logo.png" class="img-fluid logo"> </a>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<?php wp_nav_menu(
array(
'theme_location' => 'top-menu',
'menu_class' => 'top-menu'
)
);?>
</ul>
</div>
</nav>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu').click(function(){
$('ul').toggleClass('active');
})
})
</script>
CSS
nav{
width:100;
background:white;
}
ul{
width:80%;
margin:0 auto;
padding:0;
}
ul li{
list-style:none;
display:inline-block;
padding:20px;
}
ul li a {
color:black;
text-decoration:none;
}
.toggle {
width:100%;
padding:10px 20px;
background:white;
text-align:right;
box-sizing: border-box;
color:black;
font-size:30px;
display:none;
}
#media (max-width:959px)
{
.toggle{
display:block;
}
ul{
width:100%;
display:none;
}
ul li{
display:block;
text-align: center;
}
.active{
display:block;
}
}
I keep getting the logo and the nav on separate lines and or a repeat logo on both the main nav and the dropdown for the hamburger option. Please help!