Change color of navigation menu hover and text

Hii,

Please, Go to Dasahboard -> Appearance -> Customize -> Theme Options -> Theme General Options -> paste code in custom CSS box and save –

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #ba2e5f !important;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #ba2e5f !important;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #000 !important;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
color: #000 !important;
}

Thank you @weblizar_support for a prompt response. I followed your instructions, but the color on the navigation menu items did not change with selection or with hover. I’m trying to change the color of the menu items when you hover over them or you click on one to go to a page. Can you help me troubleshoot further?

Use the below code –

.navbar-default .navbar-nav  .active  a, .navbar-default .navbar-nav .active  a:hover, .navbar-default .navbar-nav  .active  a:focus {
    background-color: #ba2e5f !important;
}
.navbar-default .navbar-nav  li a:hover, .navbar-default .navbar-nav  li  a:focus {
    background-color: #ba2e5f !important;
}
.navbar-default .navbar-nav  .active  a, .navbar-default .navbar-nav  .active  a:hover, .navbar-default .navbar-nav  .active  a:focus {
    color: #000 !important;
}
.navbar-default .navbar-nav  li a:hover, .navbar-default .navbar-nav  li  a:focus{
color: #000 !important;
}

This successfully changed the color of the background and text when I hover over an item on the menu bar. The only issue that I’m still having is the color of the menu items that auto drop down are still the color that they were previously. I would like to get that color to change. https://www.screencast.com/t/D6mlXLXxHx Hopefully this will show you more about my problem. Thank you.

• This reply was modified 7 years, 8 months ago by adollkiss.

Hello,

Use this code in Custom CSS box and save –

.dropdown-menu li a:hover {
	background-color: #ba2e5f;
	color: #000;
}

Thanks.

Thank you again for the reply, but unfortunately that code did not change any colors. The dropdown menu color is still the same as it has been which is the default color. Any other suggestions?

Thank you very much!

Hello,

Use this code in Custom CSS box and save –

.dropdown-menu li a {
    background-color: #ba2e5f;
}

Thanks.

My problem is very close to being solved. Thank you.

This code allowed the drop down menu to have a different color. The only issue is that now the drop down menu has the new color, but when I hover over any of the drop down menu items, the main navigation item turns back to the original color. Once the navigation menu item stays the same color as the drop down menu items, I’ll be set. Thank you so much for your time on this. Your theme is great!

Hello,

Use this code in Custom CSS box and save –

.navbar-default .navbar-nav  .open  a, .navbar-default .navbar-nav  .open a:hover, .navbar-default .navbar-nav .open  a:focus {
    background-color: #ba2e5f;
}

Thanks.