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>
      </div>
</li>

CSS:

.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,

Damian


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.

FREE CONSULTATION

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

Status

Answered

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