How to change text color during hovering dropdown menu items

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: How to change text color during hovering dropdown menu items?

Sergey Medgaus asked 7 years ago

Hi, there. I need your help.I have a navbar from MDB and there is a dropdown menu. I chose a dark theme, and when I click on this menu, it shows ok, but when I hover on any item of this dropdown list text isn't visible.
State before hovering
State after hovering

<!--Navbar-->
<nav class= "navbar fixed-top navbar-expand-lg navbar-dark stylish-color">
    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- Links -->
        <ul class="navbar-nav mx-auto">
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-graduation-cap mr-1"></i>Тематический раздел
                </a>
                <div class="dropdown-menu dropdown-primary my-drop-down-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#"><i class="fa fa-file-text mr-2"></i>Реферат</a>
                    <a class="dropdown-item" href="#"><i class="fa fa-font mr-2"></i>Библиотека</a>
                    <a class="dropdown-item" href="#"><i class="fa fa-link mr-2"></i>Ссылки</a>
                    <a class="dropdown-item" href="#"><i class="fa fa-binoculars mr-2"></i>Отчёт о поиске</a>
                </div>
            </li>
        </ul>
        <!-- Links -->
    </div>
    <!-- Collapsible content -->
</nav>
<!--/.Navbar-->

The question is how to make the text remain black so it's easy to see it on light-grey background?

Marta Szymanska staff pro premium answered 7 years ago

Hi,

  1. instead of class.dropdown use together.btn-group with.nav-item.
  2. add this CSS code to your CSS file or <style></style> tags on the top of your HTML file:

.navbar .btn-group .dropdown-menu a:hover {
color: #000 !important;
}
.navbar .btn-group .dropdown-menu a:active {
color: #fff !important;
}

Best,

Marta

limalbert commented 7 years ago

Hey, I tried adding the CSS above, but it doesn't work. Is below the correct way to implement the CSS? I change the dropdown to btn-group to use together with nav-item. HTML Link:<a href="https://pastebin.com/8YGgCYpe" rel="nofollow"> https://pastebin.com/eQt2Hqfi"></a>

Ollie Vincent pro answered 7 years ago

Hi, try something like this: 
.dropdown .dropdown-menu .dropdown-item:active, .dropdown .dropdown-menu .dropdown-item:hover{background-color: pink !important;}

limalbert commented 7 years ago

Thank you! This works! Btw, how do I post comment with box of code like above? It always shows the tag as paragraph instead of applying the pre tags like below. <pre>Start your code here</pre>

rocini.jr answered 7 years ago

Hi All!!! Here is a code that's working for me, using gradients and some transitions:   Att, Rocini Junior 
Start your code here
.dropdown-menu a{
 color: #111111 !important;
}
.dropdown-menu a:hover{
 background: #014464!important;
 background: linear-gradient(left, #0272a7, #013953);
 background: -moz-linear-gradient(left, #0272a7, #013953)!important;
 background: -webkit-gradient(linear, 100% 100%, 0% 0%, from(#0272a7), to(#013953))!important;
color: #f8f9fa !important;
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out; }
}

James Bond commented 6 years ago

you have given the useful info to us that I really want. Thanks a lot for this. https://www.webtechcoupons.com/offers/bingads/ Visit our site also its make your mood interesting.

Write
Create snippet
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: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Sergey Medgaus
0Support score
1Questions 0Answers
0Snippets likes 0Snippets