Mutliple dropdown menu colors

Topic: Mutliple dropdown menu colors

jouvrard pro asked 5 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 5 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

jouvrard pro answered 5 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 5 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

Piotr Glejzer staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

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 5 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".
<div>
<div>
<div>
<div>
<pre>Start your code here</pre>
<div><li class="nav-item dropdown ml-2"></div>
<div>                <a class="nav-link dropdown-toggle waves-effect waves-light" aria-expanded="true" aria-haspopup="true" data-toggle="dropdown"></div>
<div>                    <i class="fal fa-user"></i></div>
<div>                </a></div>
<div>                <div class="dropdown-menu dropdown-menu-right dropdown-primary shadow" aria-labelledby="navbarDropdownMenuLink-5"></div>
<div>                    <a class="dropdown-item waves-effect waves-light" href="#"></div>
<div>                        <i class="fal fa-address-card fa-fw mr-2"></i> Mon compte</div>
<div>                    </a></div>
<div>                    <a class="dropdown-item waves-effect waves-light" href="#" data-toggle="modal" data-target="#ModalDeconnexion"></div>
<div>                        <i class="fal fa-power-off fa-fw mr-2"></i> Déconnexion</div>
<div>                    </a></div>
<div>                </div></div>
<div>            </li></div>
</div>
</div>
</div>
</div>

Please insert min. 20 characters.

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

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

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

jouvrard

Pro User 898Support score
46Questions 70Answers 11Snippets