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.

https://i.sstatic.net/vKwLE.png

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

Struggling to align the login button accurately within the navbar

For proper alignment, the "Login" button needs to be pushed to the right of the navbar alongside other buttons. To see the issue and the code, check out this JSFiddle example: https://jsfiddle.net/sterlingmd17/tk17zjfq/1/ <nav class="navbar navbar ...

csshtmldrop-down-menubootstrap-4

What is the best way to fetch values from individual buttons using PHP?

<form action="posts-ayarlar.php" method="POST" id="demo-form2" data-parsley-validate class="form-horizontal form-label-left"> <table class="table table-striped table-bordered" ...

javascriptphphtml

I'm having trouble finding a solution to remove the white space

I've been troubleshooting a website and noticed some unexpected whitespace on the page. Even though I have set my page wrapper div and other elements to width: 100%, the content in between is not utilizing the full width of the screen. I suspect this ...

htmlcss

Switching between light and dark mode in R Shiny tables with customizable headings

I'm currently working on a visualization project for tracking Covid-19 data, and I'm having trouble changing the text color above and below a table I've created. I've attached an image to show exactly what needs to be modified. Additio ...

cssrshinydatatablesdt

What is the best way to add a background to certain elements?

Is there a simple and elegant way to swap the background of the circle with the background of the div underneath? I would like the circles to have the background image of div "one", while keeping div "one" invisible (not using visibility:hidden). I am lo ...

htmlcss

Enhance User Experience by Making Each Background Slideshow Image Clickable

I want to create a background image slideshow for my photography portfolio. Each image should fade in and link to its respective gallery. I also want the text box to fade with the images and link to the corresponding gallery. The challenge is adding the li ...

htmlcss

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

javascripthtmlcss

When the page is resized for mobile, the Bootstrap modal shifts downwards

I am encountering an issue with a modal that pops up on my webpage when clicked. It is perfectly centered in a browser view and smaller views. However, when I resize the page for phones, the modal shifts down the page and requires scrolling to see it. How ...

javascripthtmlcsstwitter-bootstrap

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly. Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS. When I ...

javascripthtmlcsstwitter-bootstrap

What are the acceptable ID attribute values to use with JQuery selectors?

Can you tell me what the acceptable values are for the ID attribute in HTML elements when utilizing JQuery selectors? Is JQuery conforming to HTML4 or HTML5 rules regarding the ID attribute? ...

jqueryhtmljquery-selectorshtml4

Utilizing Semantic HTML to Showcase a Product Comparison

As I prepare to showcase various products on a website for customers to choose from, each with its own name, description, and list of pros and cons compared to other products, I find myself unsure about the best way to structure the HTML. While headings a ...

html

No matter how much I try, the text refuses to align with the top-left corner

I have been working on creating a loading screen, but I am facing an issue with aligning the h1 tag selected to the top left. As a young developer at the age of 13, I am quite confused. I attempted to use the following CSS properties: vertical-align: top; ...

htmlcsssvgloadingloader

Preserving spacing using minimum widths

Looking for some help with a page layout issue. I have a header on my page with a title and menu. Currently, the header has a margin and a minimum width set to the width of the menu. However, when the user resizes the window and reaches the minimum width, ...

jqueryhtmlcss

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

javascripthtmlcsshtml-tablemodal-dialog

What is the best way to showcase an image using Vue data that is in string format and originates from the backend?

Within my project, the profile image paths of users are stored in the database as a varchar, which is then converted into a string in the backend. This string is then utilized and sent to the frontend using JSON. I am currently facing a challenge in utiliz ...

htmlvue.jsfrontend

When using JavaScript, links within the window.location are automatically altered

When using window.location (.assign, .replace, .href) to redirect to a product page on click, I encountered an issue where it automatically changes some of the href links. For example: instead of "previous href= 'commercial/fonts/fonts.min.css' ...

javascripthtml

Creating a Jquery method to handle multi-line ellipsis for long text

Check out this fiddle I made: http://jsfiddle.net/mupersan82/JYuSY/ This snippet handles multiline ellipsis: $(function() { var ellipsisText = $('.multilineEllipseText'); var textContainer = $('.incidentCellBottomRight').height(); whi ...

jqueryhtmlcss

Discovering the Nearest Textfield Value Upon Checkbox Selection Using JQuery

How can I retrieve the value of the nearest Textfield after selecting a checkbox? This HTML snippet serves as a simple example. In my actual project, I have dynamically generated lists with multiple checkboxes. I require a way to associate each checkbox wi ...

javascriptjqueryhtmlcheckboxclosest

Content in a div with a transparency level set at 50%

Within a div container, I currently have text displayed. The challenge that I'm facing is that the container itself has an opacity of 0.5, and I would like the text to be fully visible with an opacity of 1. Unfortunately, due to the constraints of th ...

csshtmlopacity

Get the ability to overlay text onto an image by using jQuery for downloading

Currently, I am facing an issue with an online photo editor in my project. The problem is that I am unable to download the image after adding and editing text on it. The texts added are editable but the image cannot be downloaded after the changes. I nee ...

javascriptphpjqueryhtmlcss