sidenav-link something sets last item to active


Topic: sidenav-link something sets last item to active

losdude asked 3 years ago

Expected behavior

No menu item should show active if I haven't specified the active class on it (sidenav-link class item)

Actual behavior

The last item in the

  • list of sidenav-item ('s) gets selected as active every time, no matter what. Even if I specify another
  • to be active, it switches to the last one.

    Resources (screenshots, code snippets etc.) You can see this happen here: https://mdbootstrap.com/snippets/standard/mdbootstrap/2515385?view=side Notice the last item (bottom left, when the menu is showing) is always selected (SALES menu item).


  • Michał Duszak staff answered 3 years ago

    The case is that href attr is empty. Try to change sidenav code for this, or just set each href to href="#"

    <nav id="sidenav-1" class="sidenav" data-mdb-hidden="false" data-mdb-accordion="true">
        <a class="ripple d-flex justify-content-center py-4" href="#!" data-mdb-ripple-color="primary">
          <img id="MDB-logo" src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
            alt="MDB Logo" draggable="false" />
        </a>
    
        <ul class="sidenav-menu">
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-chart-area fa-fw me-3"></i
              ><span>Webiste traffic</span></a
            >
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link"
              ><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a
            >
            <ul class="sidenav-collapse">
              <li class="sidenav-item">
                <a class="sidenav-link">Profile</a>
              </li>
              <li class="sidenav-item">
                <a class="sidenav-link">Account</a>
              </li>
            </ul>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link"
              ><i class="fas fa-lock fa-fw me-3"></i><span>Password</span></a
            >
            <ul class="sidenav-collapse">
              <li class="sidenav-item">
                <a class="sidenav-link">Request password</a>
              </li>
              <li class="sidenav-item">
                <a class="sidenav-link">Reset password</a>
              </li>
            </ul>
          </li>
    
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-chart-line fa-fw me-3"></i
              ><span>Analytics</span></a
            >
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-chart-pie fa-fw me-3"></i
              ><span>SEO</span></a
            >
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-chart-bar fa-fw me-3"></i
              ><span>Orders</span></a
            >
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-globe fa-fw me-3"></i
              ><span>International</span></a
            >
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-building fa-fw me-3"></i
              ><span>Partners</span></a
            >
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-calendar fa-fw me-3"></i
              ><span>Calendar</span></a
            >
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-users fa-fw me-3"></i
              ><span>Users</span></a
            >
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link" href="#">
              <i class="fas fa-money-bill fa-fw me-3"></i
              ><span>Sales</span></a
            >
          </li>
        </ul>
      </nav>
    

    losdude commented 3 years ago

    That's it! Thanks


    Please insert min. 20 characters.

    FREE CONSULTATION

    Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

    Status

    Resolved

    Specification of the issue
    • User: Free
    • Premium support: No
    • Technology: MDB Standard
    • MDB Version: MDB5 3.9.0
    • Device: Desktop
    • Browser: Edge
    • OS: Windows 10
    • Provided sample code: No
    • Provided link: Yes