-1

Creating a navbar that has many menu items. Navbar will always visible. Some items will be shown right after clicking the navbar button. And others remain steady to navbar.

This is with bootstrap navbar-toggler button. Toggler button is fully functional but adding more and more items make the navbar just lengthier.

Thanks.

    <div class="container">
        <a class="navbar-brand" href="#"><img src="img/X.png" alt="logo" style="width:40px;"></a>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a href="#">Home</a>
            </li>
            <li class="nav-item">
                <a href="#">Services</a>

            <li class="nav-item">
                <a href="#">Contact</a>
            </li>
            <li class="nav-item">
                <a href="#">About</a>
            </li>
        </ul>
        </div>
        <button class="btn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"></button>
        <div>
            <ul>
                <li class="nav-item">
                    <a class="nav-link" href="#">Item 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Item 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Item 3</a>
                </li>
            </ul>
            <span class="navbar-toggler-icon"></span>
        </div>
        </div>
    </nav>
debashish
  • 1
  • 1

1 Answers1

0

You have some issues in your HTML. You have wrapped everything inside button. I think I got what you wanted to implement. Have a look:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><img src="img/X.png" alt="logo" style="width:40px;"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>

        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Item 1</a>
            <a class="dropdown-item" href="#">Item 2</a>
            <a class="dropdown-item" href="#">Item 3</a>
          </div>
        </li>
    </ul>
  </div>
</nav>
zgabievi
  • 1,162
  • 6
  • 28