如何使徽标和菜单位于同一行

Question

我刚刚用汉堡包图标制作了第一个响应式下拉菜单，但似乎无法在同一行上获得徽标和菜单（既是导航又是图标）。

        <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;
}

}

我不断在单独的行上获得徽标和导航，或者在主导航和下拉菜单中同时获得重复的徽标。请帮忙！