Highlighted

What in bootstrap css is this style called

Enthusiast ,
May 15, 2020

Copy link to clipboard

Copied

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:

 

Screenshot 2020-05-15 at 11.46.38.png

 

Thanks in advance.

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 {

 

}

 

 

 

 

 

TOPICS
Bootstrap

Views

952

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

What in bootstrap css is this style called

Enthusiast ,
May 15, 2020

Copy link to clipboard

Copied

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:

 

Screenshot 2020-05-15 at 11.46.38.png

 

Thanks in advance.

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 {

 

}

 

 

 

 

 

TOPICS
Bootstrap

Views

953

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 15, 2020 0
LEGEND ,
May 15, 2020

Copy link to clipboard

Copied

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 {

 

}

 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2020 2
Enthusiast ,
May 15, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2020 0
Adobe Community Professional ,
May 15, 2020

Copy link to clipboard

Copied

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

Not duplicated.  Dot = class.  Colon = pseudo-class.  Bootstrap uses both.

.active, :active

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2020 0
osgood_ LATEST
LEGEND ,
May 16, 2020

Copy link to clipboard

Copied

My eyes missed that........only use whats specifically needed would be my advice but thats lost on anyone using Bootstrap of course.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2020 0