Mutliple dropdown menu colors


Topic: Mutliple dropdown menu colors

jouvrard pro asked 6 years ago

Hello, In one dropdown menu, I have two options: "My account" or "Exit". My general dropdown menu is "dropdown-primary", but I would like a "danger background" when my cursor is over "Exit". Is it possible without modify anything in my CSS files? Thanks, Jerome

Piotr Glejzer staff commented 6 years ago

Hi jouvrard, I think so. But can you show me your code? It will be more faster to modify your code. Best, Piotr

Piotr Glejzer staff answered 6 years ago

Hi, Can you try this? Code CSS

.dropdown-danger:hover {
      background-color: #FF3547 !important;
    }
and your HTML


    <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="navbarDropdownMenuLink-5">

      <a class="dropdown-item waves-effect waves-light dropdown-primary" href="#">

        <i class="fal fa-address-card fa-fw mr-2"></i> Mon compte                     </>

      <a class="dropdown-item waves-effect waves-light dropdown-danger" href="#" data-toggle="modal" data-target="#ModalDeconnexion">

        <i class="fal fa-power-off fa-fw mr-2"></i> Déconnexion                     </a>
    </div>
Is that resolve your problem? Best, Piotr

jouvrard pro answered 6 years ago

Here is just the part of code. As you can see, I've put my dropdown menu as "dropdown-primary", so all my hover effects are blue white shadow. But I would like to have a "dropdown-danger" for "Déconnexion".
Start your code here
<li class="nav-item dropdown ml-2">
                <a class="nav-link dropdown-toggle waves-effect waves-light" aria-expanded="true" aria-haspopup="true" data-toggle="dropdown">
                    <i class="fal fa-user"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-primary shadow" aria-labelledby="navbarDropdownMenuLink-5">
                    <a class="dropdown-item waves-effect waves-light" href="#">
                        <i class="fal fa-address-card fa-fw mr-2"></i> Mon compte
                    </a>
                    <a class="dropdown-item waves-effect waves-light" href="#" data-toggle="modal" data-target="#ModalDeconnexion">
                        <i class="fal fa-power-off fa-fw mr-2"></i> Déconnexion
                    </a>
                </div>
            </li>

jouvrard pro answered 6 years ago

Hello, It's exactly what I want, thank you. I tought it was possible without add CSS, but it's perfect like this. :)

Piotr Glejzer staff commented 6 years ago

No problem! If you want have danger color when dropdown is being activated by the user you can add one more code! .dropdown-danger:hover, .dropdown-danger:active { background-color: #FF3547 !important; } Have a nice day!

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No