Navbar desktop to mobile-CodePudding

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  id="home">
    <div >
      <nav >
        <div id="nav-toggle">
          <a href="#">
            <span></span>
            <span></span>
            <span></span>
          </a>
        </div>
        <div >
          <span >PRACTICE FOR NAVBAR HAMBURGER</span>
        </div>
        <div >
          <div  id="nav">
            <ul >
              <li >
                <a >HOME</a>
              </li>
              <li >
                <a  href="#shop">SHOP</a>
              </li>
              <li >
                <a >BLOG</a>
              </li>
              <li >
                <a >ABOUT US</a>
              </li>
              <li >
                <a >CONTACT</a>
              </li>
            </ul>
          </div>
        </div>
        <div >
          <div  id="nav">
            <ul >
              <li >
                <a  href="#">MY ACCOUNT</a>
              </li>
              <li >
                <a  href="#"><i ></i></a>
              </li>
              <li >
                <a  href="#"><i ></i></a>
              </li>
              <li >
                <a  href="#"><i ></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

CodePudding user response：

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 >
<div  id="nav">
  <ul >
    <li >
      <a >HOME</a>
    </li>
    <li >
      <a  href="#shop">SHOP</a>
    </li>
    <li >
      <a >BLOG</a>
    </li>
    <li >
      <a >ABOUT US</a>
    </li>
    <li >
      <a >CONTACT</a>
    </li>
  </ul>
</div>
<div  id="nav">
    <ul >
      <li >
        <a  href="#">MY ACCOUNT</a>
      </li>
      <li >
        <a  href="#">1<i ></i></a>
      </li>
      <li >
        <a  href="#">2<i ></i></a>
      </li>
      <li >
        <a  href="#">3<i ></i></a>
      </li>
    </ul>
  </div>
  </div>

CodePudding user response：

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