Jump to content

How to set background color for not active a links


newcoder1010
 Share

Recommended Posts

Hi,

 

I have the below code which works.

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus  {  color: #ffffff; Font-weight: bold;     background-color: #191970; } .navbar-default .navbar-nav>li>a   {  color: blue; Font-weight: bold;  background-color: red;   } 

I like to make background color red when I hover over the menu links. Below code works for active link only. I am not sure how can I set background red for active and non active links.

.navbar-default .navbar-nav>.active>a:hover  {  color: #ffffff; Font-weight: bold;     background-color: red; } 

Can you please help? Thank you.

 

Link to comment
Share on other sites

Hi,

 

I think you just have to replace .active with li in your code...

.navbar-default .navbar-nav > li > a:hover { color: #ffffff; Font-weight: bold; background-color: red; } 

This will remove the specification for active link and the red bg effect will be applied to all menu items on hover.

Link to comment
Share on other sites

The code you gave me works for inactive links. I had to write one for active and one for inactive.

 

active:

.navbar-default .navbar-nav>.active>a:hover  {  color: #ffffff; Font-weight: bold;     background-color: red; } 

Inactive:

.navbar-default .navbar-nav > li > a:hover { color: #ffffff; Font-weight: bold; background-color: red; } 

Thank you.

Edited by newcoder1010
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...