Bootstrap: Navbar Two nav-item should be their after collapsing navbar

I am a beginner to learn to make a responsive website.I need a help in making Dropbox navbar.For my Assignment (using HTML,CSS,BOOTSTRAP,Javascript) i was trying to make Dropbox site in a responsive way to learn all those things. I got into threeproblems.

Make a Two column in an dropdown-menu and increase it width.
make the dropdown look like the below image.
When collapsing the navbar Login and signup should still on the NAvbar

The Image : (https://i.sstatic.net/rXRYN.png)

Logo in the code : (https://i.sstatic.net/ERv7J.png)

Hope someone can help me .

The code of navbar is here.

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><img src="images/logo.png" height="30px"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Why Dropbox?
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Products
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Solutions
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#" tabindex="-1" aria-disabled="true">Pricing</a>
          </li>
        </ul>
       
        <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Contacts
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Get App
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">
                Sign Up
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Login
            </a>
        </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <button type="button" class="btn-primary">Get Started <i class="fa fa-long-arrow-right"></i></button>
              
            </a>
        </li>
       
      </ul>
      </div>
    </div>
  </nav>

Solution

I hope this would help you. Add the below file to your code

For more please check: https://codepen.io/iamponsiva/pen/QWJMgQE

.w250 {
  width: 250px;
}

.navbar-brand {
  font-size: 1.4em;
}

.navbar-dark .navbar-nav a.nav-link {
  color: #ffffff;
  font-size: 1.1em;
}

.dropdown-menu {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border: none;
  border-radius: 0;
  padding: 0.7em;
}

@media only screen and (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: flex;
  }
  .dropdown-menu.show {
    display: flex;
  }
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
}

.dropdown-menu li .dropdown-item {
  color: gray;
  font-size: 1em;
  padding: 0.5em 1em;
}

.dropdown-menu li .dropdown-item:hover {
  background-color: #f1f1f1;
}

.dropdown-menu li:first-child a {
  font-weight: bold;
  font-size: 1.1em;
  text-transform: uppercase;
  color: #516beb;
}

.dropdown-menu li:first-child a:hover {
  background-color: #f1f1f1;
}

@media only screen and (max-width: 992px) {
  .dropdown-menu.show {
    flex-wrap: wrap;
    max-height: 350px;
    overflow-y: scroll;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1140px) {
  .dropdown:hover .dropdown-menu {
    width: 40vw;
    flex-wrap: wrap;
  }
}

.dropdown-menu {
  border-radius: 0;
  border: none;
  padding: 0.5em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
}

.dropdown-menu li a {
  color: gray;
  padding: 0.5em 1em;
}

.dropdown-menu li:first-child a {
  font-weight: bold;
  font-size: 1.1em;
  color: #516beb;
}

@media screen and (min-width: 993px) {
  .dropdown:hover .dropdown-menu {
    display: flex;
  }
  .dropdown-menu.show {
    display: flex;
  }
}

@media screen and (max-width: 992px) {
  .dropdown-menu.show {
    max-height: 60vh;
    overflow-y: scroll;
  }
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #ffffff;">
    <div class="container-fluid">
      <a class="navbar-brand fw-bold" href="#">
        <img src="https://i.sstatic.net/ERv7J.png" class="w250" alt="img">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Why Dropbox?
          </a>
            <div class="dropdown-menu">
              <ul>
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
              </ul>
              <ul>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
              </ul>
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Products
          </a>
            <div class="dropdown-menu">
              <ul>
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
              </ul>
            </div>
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Solutions
          </a>
            <div class="dropdown-menu">
              <ul>
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
              </ul>
              <ul>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Pricing
          </a>
          </li>

        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Contacts
            </a>
            <div class="dropdown-menu">
              <ul>
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
              </ul>
              <ul>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Get App
            </a>
            <div class="dropdown-menu">
              <ul>
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
                <li><a class="dropdown-item" href="#">Mega Menu Link</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
                Sign Up
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Login
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <button type="button" class="btn btn-primary">Get Started <i class="fa fa-long-arrow-right"></i></button>

            </a>
          </li>

        </ul>
      </div>
    </div>
  </nav>


  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

</body>

</html>