Topic: navbar dropdown wrong hover color/behaviour
TheShoosh pro asked 7 years ago
Using the basic code example from the angular navbar page, the dropdown menu children do not display the blue background color on hover. Instead they are barely visible with a gray highlight as shown here: https://imgur.com/a/N1Of3
<!--Navbar--> <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo"> <!-- Navbar brand --> <logo><a class="navbar-brand" href="#">TEST</a></logo> <!-- Collapsible content --> <links> <!-- Links --> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius>Pricing</a> </li> <!-- Dropdown --> <li class="nav-item dropdown" dropdown> <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light"> Basic dropdown<span class="caret"></span></a> <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu"> <a class="dropdown-item waves-light" href="#">Action</a> <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a> <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a> <div class="divider dropdown-divider"></div> <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a> </div> </li> </ul> <!-- Links --> <!-- Search form <form class="form-inline waves-light" mdbRippleRadius> <input class="form-control mr-sm-2" type="text" placeholder="Search"> </form> --> </links> <!-- Collapsible content --> </mdb-navbar> <!--/.Navbar-->
Additionally, Chrome displays the dropdown menu\'s nav link incorrectly due to the type=\"button\" that is applied. Chrome shows a gray button (however Edge displays it correctly). Print-screen is here: https://imgur.com/a/oqJR5
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes