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

Add comment

Piotr Glejzer staff answered 6 years ago

1 0 Best answer

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

Add comment

jouvrard pro answered 6 years ago

0 0 Best answer

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

</a>

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

</a>

<i class="fal fa-power-off fa-fw mr-2"></i> Déconnexion

</a>

</div>

</li>

Add comment

jouvrard pro answered 6 years ago

0 0 Best answer

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!

Add comment

Write

Create snippet

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

About author

jouvrard

Pro User

898Support score
46Questions 70Answers

1Snippets likes 11Snippets