Navbar desktop to mobile - html

Question

I wanted to create a navbar hamburger in mobile view. But The issue is, I have two ULs, and when I created a hamburger The two UL's will split into mobile versions. Is there any way I can fix that thing?
This is my code:
<header>
<div class="container" id="home">
<div class="container">
<nav class="navbar navbar-default">
<div id="nav-toggle">
<a href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="mr-auto">
<span class="navbar-title">PRACTICE FOR NAVBAR HAMBURGER</span>
</div>
<div class="mx-auto">
<div class="navbar justify-content-center" id="nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active hometext disabled">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#shop">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">CONTACT</a>
</li>
</ul>
</div>
</div>
<div class="ml-auto">
<div class="navbar" id="nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link hometext" href="#">MY ACCOUNT</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="fas fa-search"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="far fa-heart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#"><i class="fas fa-shopping-cart"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
I wanted to stay the desktop view as this
The first <ul> is in the HOME section then the second <ul> is MY ACCOUNT

Answer 1

You can use flex for a div that includes two ul:
*{
box-sizing: border-box;
}
.container{
display: flex;
justify-content: space-between;
}
.navbar1{
width: 60%;
}
.navbar2{
width: 30%;
}
ul{
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
}
nav1 li{
width: 20%;
}
nav2 li{
width: 25%;
}
<div class="container">
<div class="navbar1 justify-content-center" id="nav">
<ul class="nav1">
<li class="nav-item">
<a class="nav-link active hometext disabled">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#shop">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link hometext">CONTACT</a>
</li>
</ul>
</div>
<div class="navbar2" id="nav">
<ul class="nav2">
<li class="nav-item">
<a class="nav-link hometext" href="#">MY ACCOUNT</a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">1<i class="fas fa-search"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">2<i class="far fa-heart"></i></a>
</li>
<li class="nav-item">
<a class="nav-link hometext" href="#">3<i class="fas fa-shopping-cart"></i></a>
</li>
</ul>
</div>
</div>

Answer 2

I think the best solution is to wrap both of your ul into a single one in mobile screen sizes using JavaScript