css/html – methods to make navbar emblem centered and as toggler for collapse

October 1, 2022

137

It is a fundamental navbar

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a category="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" kind="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">
          <a category="nav-link lively" aria-current="web page" href="#">Dwelling</a>
        </li>
        <li class="nav-item">
          <a category="nav-link" href="#">Hyperlink</a>
        </li>
        <li class="nav-item">
          <a category="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I need to make the navbar emblem centered and hyperlinks on either side.
And when the navbar is seen on cell the hyperlinks would collapse and the toggler can be the emblem solely, that’s, no separate toggle button can be used solely emblem picture will probably be used to open the navbar.
Pictures for reference.

Desktop Picture