Tips for altering the color of an activated Bootstrap dropdown toggle

When the Dropdown menu is open, I would like to customize its default colors. Specifically, I want to change the border color and background using CSS.

Below is the HTML code snippet:

<div class="row menu">
 <ul class="nav nav-pills pull-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle"
       data-toggle="dropdown">
      My reports
      <span class="caret my-reports-caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><%= link_to "Performance", performance_reports_path %></li>
      <li class="divider"></li>
      <li><%= link_to "Account settings", '#' %></li>
    </ul>
  </li>
</ul>
</div>

This is the CSS code I attempted:

.menu .nav-pills .dropdown .open .dropdown-toggle{
    background-color: red;
}

Can someone help me identify what's wrong with my selectors?

htmlcsstwitter-bootstrap

Answer №1

If you're working with the most recent Bootstrap release, try utilizing this particular CSS class.

    .dropdown-toggle:active, .open .dropdown-toggle {
        background:#FFF !important; 
        color:#000 !important;
    }

This solution resolved my issue and could potentially assist you as well.

Answer №2

I also found success with this solution:

.dropdown-toggle[aria-expanded="true"] {
  background:#FFF !important;
  color:#000 !important;
}

Answer №3

Presenting your issue:

#original.menu .nav-pills .dropdown .open .dropdown-toggle {
    border: 1px solid blue;
}

#suggested.menu .nav-pills .dropdown .dropdown-toggle {
    border: 1px solid red;
}

Check out this link for more details.

.open is not found in the element sequence mentioned.

Here's the updated fiddle with the borders (including .open and proper styles for border-style and border-width):

Visit this link to see the changes.

Answer №4

.menu-pills .expand .toggle-dropdown, .navigation > .activated.active > a:hover {
    background-color:#111;
    border-color: #444;
    }

Answer №5

This solution worked perfectly for me:

/*
* Custom styling for navigation pills
*/
.nav-pills 
{
    padding-top: 2px;
    padding-bottom: 2px;
    height:32px;
}
.nav-pills > li 
{
    height:32px;
}
.nav-pills > li > a 
{
    padding-top: 6px;
    color: white;
    background-color: #4e5664;
    height:32px;
}
.nav-pills > li > a:hover, 
.nav-pills > li.hover > a 
{
    color: white;
    background-color: #337ab7;
}
.nav-pills > li.active > a 
{
    color: white;
    background-color: #337ab7;
}

/*
* Custom styling for dropdown in navigation pills
*/
.nav.nav-pills > li.dropdown.active.open > a, 
.nav.nav-pills > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-pills > li.dropdown.open > a, 
.nav.nav-pills > li.dropdown.open > ul.dropdown-menu a:hover 
{
    color: white;
    background-color: #337ab7;
}
.nav.nav-pills > li.dropdown.active.open > a, 
.nav.nav-pills > li.dropdown.active.open > ul.dropdown-menu a:hover,
.nav.nav-pills > li.dropdown.open > a, 
.nav.nav-pills > li.dropdown.open > ul.dropdown-menu a:hover 
{
    color: white;
    background-color: #337ab7;
}

/*
* Styling for dropdown menu in navigation pills
*/
.nav-pills > li > ul.dropdown-menu 
{
    background-color: #4e5664;
}
.nav-pills > li > .dropdown-menu > li > a {
    color: white;

    background-color: #4e5664;
}
.nav-pills > li > dropdown-menu > li > a:hover, 
.nav-pills > li > dropdown-menu > li.hover > a 
{
    color: white;
    background-color: #337ab7;
}
.nav-pills > li  > dropdown-menu > li.active > a 
{
    color: white;
    background-color: #337ab7;
}

For a visual example, check out this image:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Set the body height to equal that of the entire document`

Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...

cssheight

How can I wrap content with the <li> element in a cross-browser compatible way?

I am encountering an issue with the dropdown menu on my website located at . When hovering over elements with a dropdown menu, you may notice that some of the items within the dropdown span more than one line and have varying widths. My goal is to adjust ...

csswidthhtml-lists

Utilizing React.js with Material-UI to retrieve data from a table row when clicked

I came across a code snippet for a material table that can handle lists as input and perform pagination, sorting, and filtering on them. The challenge I am facing is figuring out how to extract the data from a row click event and navigate to a new route al ...

htmlreactjsmaterial-uimaterial-design

What is the best way to establish a minimum width in pixels and a maximum width determined by the variable width of the browser window?

In this scenario: http://jsbin.com/anoyik/edit#preview http://jsbin.com/anoyik/edit#source Is there a way to make the red box's width a minimum of 200px and allow it to expand as the browser window's width increases horizontally? ...

css

What is the best way to determine font size based on the width of the

In order to ensure that certain elements on my page do not exceed specific widths, it is crucial for me to use a monospaced font. This will limit the horizontal "stride" between characters to stay within a specified threshold. However, simply setting the ...

cssfonts

Searching for a div table using XPATH in Python

Struggling to extract data from a table using Selenium in Python. Any suggestions on how to achieve this? https://i.stack.imgur.com/rPlKR.png <div class="js--property-table-body project-property-table__body"> <span aria-hidden=&quo ...

pythonhtmlseleniumxpath

Manipulating div position interactively with vanilla javascript during scroll

I'm trying to create an effect where an image inside a div moves vertically downwards as the user scrolls, stopping only at the end of the page. I've attempted a solution using a script from another post, but it doesn't seem to be working. ...

javascriptjqueryhtmlcssscroll

Connecting to particular sections on other pages

My website setup includes a page titled "news.html" that contains an iframe with fixed size. The iframe is linked to "innernews.html", which is the actual content to be displayed. I structured it this way for consistent page sizing, as the iframe prevents ...

html

What is the best way to delete HTML classes that were generated by a function?

Currently, I'm immersed in the Etch A Sketch project as part of my journey through The Odin Project. Using DOM manipulation, I successfully created a grid and displayed it on the screen. Now, my aim is to allow users to resize the grid by removing the ...

javascripthtmlcssdom

Save user entries in a database array

I'm working on developing a platform for advertisements where users can create detailed profiles with images. To achieve this, I need to store the information in an array within a backend database for future retrieval. Below is an example of the backe ...

javascripthtmldatabasevue.js

Utilizing visual elements to change the options of a dropdown menu

I am currently working on creating a form for a client who has requested a map of the city to allow visitors to visually select their location. They want this feature to link to the City Dropdown/Select area of the form. Here is a link to the client' ...

javascriptjqueryhtml

What is the method for viewing the content within div tags on an apex page?

Locationbox is a system outside of Salesforce, similar to Google Maps. An example can be viewed here; I am aiming to integrate it into the Salesforce platform. The first script tag fetches JavaScript code from the Locationbox service. Once the startup() f ...

javascripthtmlsalesforceapex-code

Ways to adjust the ngx-pagination color scheme?

I am looking to customize the background color of ngx-pagination Here is my current code: <pagination-controls class="custom-pagination" id="indicadorPaginationResults" (pageChange)="p=$event" maxSize="9" directionLinks="true" autoHide="true" previ ...

cssangular

Alter the class of a div when a key is pressed

Whenever I press the down arrow key, the class of a div changes. However, the class only applies while I keep my finger on the button and gets removed when I release it. I would like the class to remain permanently. What am I doing incorrectly in this code ...

jqueryhtml

The custom attribute in jQuery does not seem to be functioning properly when used with the

I am currently working with a select type that includes custom attributes in the option tags. While I am able to retrieve the value, I am experiencing difficulty accessing the value of the custom attribute. Check out this Jsfiddle for reference: JSFIDDLE ...

javascriptphphtmljquery

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

csscss-float

Executing Basic Calculations Instantly with Live Data in Qualtrics

I am encountering an issue with displaying the values on a slider in Qualtrics. I need to show the value where the respondent has placed the handle, as well as the complementary value from the other end of the scale. For example, if the user has chosen 55, ...

javascripthtmlcssruntimequaltrics

What is the best way to add content to a box once it has been hovered over?

Looking to create a sticky note-style design, but struggling with displaying the content inside the box only when hovered. In my code example below, can you help me achieve this effect? body { margin: 45px; } .box { display:inline-block; backgrou ...

javascriptjqueryhtmlcss

Tips for displaying only a list of folders in elfinder, a jquery file management plugin

Currently, I am working on enhancing the features of a file manager plugin that allows users to manage their folders effectively. One key functionality of the plugin is the ability for users to share specific folders with others. However, if a folder has n ...

javascriptphpjqueryhtmlelfinder

Unusual anomalies observed in CSS navigation bar styling

During my CSS work on a navigation bar, I came across an unusual behavior. First Attempt: #nav li { display: inline-block; } #nav li { font-size: 1em; line-height: 40px; width: 120px; height: 40px; ...

csshtml