Topic: navbar dropdown wrong hover color/behaviour

TheShoosh pro asked 6 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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags