-1

This is a basic navbar

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I want to make the navbar logo centered and links on both sides. And when the navbar is viewed on mobile the links would collapse and the toggler would be the logo only, that is, no separate toggle button would be used only logo image will be used to open the navbar. Images for reference.

Desktop Image Desktop Image

Mobile Image Mobile Image

j08691
  • 204,283
  • 31
  • 260
  • 272
Saksham
  • 128
  • 8
  • 1
    What's the problem you're facing? You haven't attempted much. You must give it a fair attempt and explain what exactly isn't working in your attempt. – Ruan Mendes Oct 01 '22 at 13:35
  • Check this link once if it can be of any help https://stackoverflow.com/a/38455880/8815211 – Hypermystic Oct 01 '22 at 13:40

1 Answers1

0

I think you want to use is

@media screen and (max-width: 480px) {

   //code here

}

in css. This code will target a device that is less than 480px(usually a phone). And this is the preferred way by most developers to target different devices.

E_net4
  • 27,810
  • 13
  • 101
  • 139
eliasciur
  • 124
  • 1
  • 12