sidenav-link something sets last item to active

Topic: sidenav-link something sets last item to active

losdude free 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).

Add comment

Michał Duszak staff answered 3 years ago

1 0 Best answer

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

<ul class="sidenav-menu">
 <li class="sidenav-item">
 <a class="sidenav-link" href="#">
 Webiste traffic</a
 >
 </li>
 <li class="sidenav-item">
 <a class="sidenav-link"
 >Settings</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"
 >Password</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="#">
 Analytics</a
 >
 </li>
 <li class="sidenav-item">
 <a class="sidenav-link" href="#">
 SEO</a
 >
 </li>
 <li class="sidenav-item">
 <a class="sidenav-link" href="#">
 Orders</a
 >
 </li>
 <li class="sidenav-item">
 <a class="sidenav-link" href="#">
 International</a
 >
 </li>
 <li class="sidenav-item">
 <a class="sidenav-link" href="#">
 Partners</a
 >
 </li>
 <li class="sidenav-item">
 <a class="sidenav-link" href="#">
 Calendar</a
 >
 </li>
 <li class="sidenav-item">
 <a class="sidenav-link" href="#">
 Users</a
 >
 </li>
 <li class="sidenav-item">
 <a class="sidenav-link" href="#">
 Sales</a
 >
 </li>
 </ul>
 </nav>
</code></pre>

Please insert min. 20 characters.

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 free commented 3 years ago

That's it! Thanks

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

losdude

10Support score
3Questions 0Answers 0Snippets