Topic: When clicking on Navbar, Item dropdown doesn't show again.

sameretto free asked 5 years ago

When hovering over an item on my navbar it works properly and shows everything as needed. When clicking on a navbar item the dropdown menu does not show for that specific item again until I refresh and not sure why.

<li class="nav-item mr-4 waves-light dropdown" dropdown mdbWavesEffect>
      <a dropdownToggle type="button" class="nav-link  dropdown-toggle" mdbWavesEffect id="navbarMenuLink-1"
        routerLink="About-Us"><b>About Us </b></a>
      <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
        <a class="dropdown-item waves-light" mdbWavesEffect routerLink="/About-Us/Donors-And-Partners">Donors And Partners</a>
        <div class="divider dropdown-divider"></div>
        <a class="dropdown-item waves-light" mdbWavesEffect routerLink="/About-Us/Board-Members">Board Members</a>


.dropdown:hover .dropdown-menu {display: block !important;}

.dropdown .dropdown-menu .dropdown-item:hover, .dropdown .dropdown-menu .dropdown-item:hover{background-color: #BF1E2E !important;}

Damian Gemza staff answered 5 years ago

Dear Sameretto,

Could you please try to remove the mdbWavesEffect directive from the <li class="nav-item mr-4 waves-light dropdown" dropdown> element?

When the mdbWavesEffect directive is placed on that item, I'm not able to open the dropdown.

After removing the directive the dropdown works fine.

Please let me know about the effects.

Best Regards,


sameretto free commented 5 years ago

That actually did solve the problem wow! One thing though if I click on the main Nav item, not in the drop-down list the dropdown does not go away when I hover away. Any Ideas if not no worries.

sameretto free commented 5 years ago

Thanks, I figured out this issue above ^. It was a result of something adding 'show' and 'open' class. All you have to do is remove it on click for whoever encounters this.

olfahr free commented 3 years ago

Hi I tryed this code but doesn't work. thank you

Arkadiusz Idzikowski staff commented 3 years ago

@olfahr Please provide the code that you use to render the component, so we can reproduce this problem on our end.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No