How to change text color during hovering dropdown menu items

Topic: How to change text color during hovering dropdown menu items?

Sergey Medgaus free asked 6 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?

Add comment

rocini.jr free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 5 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.

Add comment

Ollie Vincent pro answered 6 years ago

1 0 Best answer

Hi, try something like this:

.dropdown .dropdown-menu .dropdown-item:active, .dropdown .dropdown-menu .dropdown-item:hover{background-color: pink !important;}

limalbert free commented 6 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>

Add comment

Marta Wierzbicka staff answered 6 years ago

1 0 Best answer

Hi,

instead of class.dropdown use together.btn-group with.nav-item.
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 free commented 6 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>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Sergey Medgaus

0Support score
1Questions 0Answers 0Snippets