Topic: Dropdown hover effect

niellangenhoven free asked 5 years ago


Hi

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

https://www.dropbox.com/s/w70vzotj9ejdv7b/hover.JPG?dl=0

hover effect

Please advise how to fix this.

Thanks


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>

        <links>
            <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>
                <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>
                    </a>
                    <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>
                    </div>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" routerLink="home" ripple-radius (click)="signOut()">{{ 'MENU.SIGN_OUT' | translate}}</a>
                </li>
            </ul>
        </links>
    </navbar>

Magdalena Obalska free answered 5 years ago


Hi,

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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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