Topic: Dropdown hover effect

niellangenhoven free asked 5 years ago


My dropdowns within a navbar don't have the correct hover effect.

hover effect

Please advise how to fix this.


niellangenhoven free answered 5 years ago

Start your code here
    <navbar SideClass="navbar navbar-expand-lg navbar-dark bg-primary scrolling-navbar" [containerInside]="false">
        <logo><a class="logo navbar-brand" href="#">Brand</a></logo>

            <ul class="navbar-nav mr-auto">
                <li class="nav-item" routerLinkActive="active">
                    <a class="nav-link" routerLink="home" ripple-radius>{{ 'MENU.HOME' | translate }}</a>
                <li class="nav-item dropdown btn-group" dropdown>
                    <a dropdownToggle class="nav-link dropdown-toggle" ripple-radius>
                         {{ 'MENU.COMPANY_MANAGEMENT' | translate }}<span class="caret"></span>
                    <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                        <a class="dropdown-item" routerLink="addCompany">{{ 'MENU.ADD_COMPANY' | translate }}</a>
                        <a class="dropdown-item" routerLink="companies">{{ 'MENU.LIST_COMPANIES' | translate }}</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" routerLink="home" ripple-radius (click)="signOut()">{{ 'MENU.SIGN_OUT' | translate}}</a>

Magdalena Obalska free answered 5 years ago


send us your code, please.

niellangenhoven free commented 5 years ago

Any ideas as to why the hover effect is not working?

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

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No