Skip to main content
M
matthew stuart
Inspiring
May 15, 2020
Answered

What in bootstrap css is this style called

  • May 15, 2020
  • 1 reply
  • 1314 views

Hi all, I am struggling to find a style in bootstrap css so I can override it. Could somebody please let me know what I need to look for, pleasse?

 

It's in the navbar where it has sub or child dropdown nav items, and it's when you click on the child item to move to another page it's background changes colour, on click but not released the click. Basically, it has a blue background which doesn't go with the rest of the site's colour scheme, and it's annoying me:

 

 

Thanks in advance.

This topic has been closed for replies.
Correct answer osgood_

It is the css selector below.

 

.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #007bff;
}

 

Change  the background color:

.dropdown-item.active, .dropdown-item:active {
background-color: tomato;
}

 

Drop the css selector above into your OWN css stylesheet and link it AFTER the link to the default Bootstrap css file - change the background-color to the color you require.

 

I'm not sure why the browser inspector shows the class as being duplicated:

 

.dropdown-item.active, .dropdown-item:active

 

You could just use:

 

.dropdown-item:active {

 

}

 

 

 

 

 

1 reply

O
osgood_Correct answer
Legend
May 15, 2020

It is the css selector below.

 

.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #007bff;
}

 

Change  the background color:

.dropdown-item.active, .dropdown-item:active {
background-color: tomato;
}

 

Drop the css selector above into your OWN css stylesheet and link it AFTER the link to the default Bootstrap css file - change the background-color to the color you require.

 

I'm not sure why the browser inspector shows the class as being duplicated:

 

.dropdown-item.active, .dropdown-item:active

 

You could just use:

 

.dropdown-item:active {

 

}

 

 

 

 

 

    M
    matthew stuartAuthor
    Inspiring
    May 15, 2020

    Thank you very much! I was looking at the :focus rather than :active.

     

    I always thought :active referred to the page you're on... I've learnt something new today

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices