How to make navigation bar responsive using bootstrap

Question

Below, I have shared my current code. The issue I am facing is related to making the navbar responsive. When I zoom in or out, I want everything to remain visually appealing; however, certain elements fall out of place, especially the navbar brand (which doesn't stay aligned to the left of the navbar) and the blue box in the top right corner (whose width becomes too large when zooming in).

I want to achieve a responsive design similar to Bootstrap's navbar, where the content stays in place when zooming out and comes closer together when zooming in. Can you help me modify my code to accomplish this?

This is the code in codeply: https://codeply.com/v/iTRyE4xanM

Below is my HTML code using bootstrap

<nav class="navbar custom-navbar navbar-expand-lg bd-nav">
      <div class="nav-blue-bar">
        <p class="nav-blue-bar-content">
          <i class="fa-solid fa-square-phone"></i> &nbsp; 0000-111-2222 &nbsp;
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <i class="fa-solid fa-envelope" style="color: #ffffff"></i>
          [email protected]
        </p>
        <p class="nav-blue-bar-content-right">
          We are now taking intakes for mat, Limited seats
        </p>
      </div>
      <div class="container">
        <a class="navbar-brand" href="#">Your Brand</a>
        <hr class="line-1" />
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse navbar-center" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Courses</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Univeristies</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Gallery</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

and below is my css

body {
  max-width: 1920px;
  margin: 0 auto;
  min-width: 1000px;
}

.nav-blue-bar {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  width: 90%;
  left: 266px;
  height: 35px;
  background-color: #192f59;
  clip-path: polygon(0% 0%, 100% 0%, 980% 100%, 3% 100%);
}

.nav-blue-bar-content {
  position: absolute;
  top: 5px;
  left: 100px;
  color: #ffffff;
  margin: 0;
  font-size: 14px;
}

.nav-blue-bar-content-right {
  position: absolute;
  top: 5px;
  right: 20%;
  color: #ffffff;
  margin: 0;
  font-size: 14px;
}

.custom-navbar {
  background-color: #f4f5f7;
  min-height: 100px;
  overflow: hidden;
  max-width: 100vw;
}

.navbar-brand {
  font-size: 34px;

  font-weight: bold;
  color: #192f59;
  margin-left: 0%;
}

.nav-link {
  font-size: 18px;
  color: #000000;
}

.navbar-center {
  display: flex;
  justify-content: center;
  padding-right: 15%;
}

.nav-item {
  padding-right: 60px;
  padding-top: 35px;
}

.line-1 {
  position: relative;
  width: 10%;
  height: 0px;
  left: -36px;
  top: 10%;
  opacity: 1;
  border: 1px solid;
  border-color: #192f59;
  transform: rotate(116.03deg);
}

I want the content to stay in its positition when i zoom in. the navbar should be aligned to the left aswell as the hr element.This is the format and design what I am After

Answer 1

you can use the container-fluid class instead of container to make the container full width and after maybe you can use the d-flex(means display: flex) and justify-content-between classes to align the box and your navbar links. I think that's will be help you.

I hope I've helped you!

Have a nice day!