Topic: When clicking on Navbar, Item dropdown doesn't show again.
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;}
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 commented 6 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 commented 6 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 commented 4 years ago
Hi I tryed this code but doesn't work. thank you
Arkadiusz Idzikowski staff commented 4 years ago
@olfahr Please provide the code that you use to render the component, so we can reproduce this problem on our end.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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