Customize the appearance of the bootstrap nav-bar by assigning unique background colors to each dropdown menu

I'm looking to set unique background colors for each dropdown in a Bootstrap nav-bar using CSS.

.mynavbar .dropdown ul.dropdown-menu:nth-child(1) {
  background-color: #59b057;
}

.mynavbar .dropdown ul.dropdown-menu:nth-child(2) {
  background-color: #eb712b;
}
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false>COMPANY</a>
  <ul class="dropdown-menu dropdown-menu-right scrollable-menu>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">DOWNLOAD</a></li>
    <li><a href="#">CERTIFICATION</a></li>
    <li><a href="#">CAREERS</a></li>
  </ul>
</li>
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false>FACILITIES</a>
  <ul class="dropdown-menu dropdown-menu-right scrollable-menu>
    <li><a href="#">PRODUCTION</a></li>
    <li><a href="#">R&amp;D</a></li>

  </ul>
</li>

Each of the dropdowns should have its own distinct background color.

htmltwitter-bootstrapcss

Answer №1

If you want to add a color to the list using the "greentbg" class, you need to specify the CSS attributes for that particular class. To make sure it takes precedence over the default bootstrap styles, remember to include "!important" at the end of the attribute.

.greentbg {
     background-color: green !important;
}

I've put together an example using the code snippet you provided: https://jsfiddle.net/xvhz8dob/1/

Answer №2

To customize dropdown menus, assign unique IDs to each and style them individually with CSS.

<ul id="backgroundcolor1" class="dropdown-menu dropdown-menu-right scrollable-menu">

#backgroundcolor1,
#backgroundcolor1:hover,
#backgroundcolor1:active {
  background-color: red;
}

Don't forget to "empty cache and hard reload" after updating the CSS files for the changes to appear on the page.

Answer №3

Could it work using li and a elements? It's worth a try...

.myheader .navbar li.dropdown-menu:nth-child(1) a {    background: blue; }
.myheader .navbar li.dropdown-menu:nth-child(2) a {    background: green; }

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

Getting the chosen value from a dropdown menu on form submission using PHP

How to Populate a Combo Box from a Database in PHP? <td>Item Name:</td> <td><select name="items"> <option value="0" selected="selected"> Choose</option> <?php while($row = mysql_fetch_ass ...

javascriptphphtmlforms

Automatically omitting a selector that mimics a switch

After conducting thorough research, I discovered a variety of solutions using jQuery and Vanilla. While one answer perfectly addressed my issue, it failed to integrate effectively with the rest of my code. So, I decided to modify the code from this Stack O ...

javascripthtmlcss

Extract content within Python pre tags

A Python code snippet is being used to extract content between PRE tags: s = br.open(base_url+str(string)) u = br.geturl() seq = br.open(u) blat = BeautifulSoup(seq) for res in blat.find('pre').findChildren(): seq = res.string ...

pythonhtmlparsingbeautifulsouppre

The issue of Bootstrap icons not displaying on the front-end arises when integrating them into a Vuejs Template

I'm in the process of constructing a web application using Vue.JS. I've integrated the [Bootstrap Icons][1] into my application, but for some reason, the icons are not showing up on the screen. Here are the steps I followed: Installed Bootstrap ...

htmlcsstwitter-bootstrapbootstrap-4vuejs2

Discovering hidden files within appsettings.json in ASP.NET Core 6 using Program.cs

Within Appsettings.json, the code resembles the following: { "Project": { "ConnectionString": "Data Source=(local)\SQLSERVER; Database=MyCompany; Persist Security Info=false; User ID='sa'; Password='sa ...

htmlasp.netjson

Exploring etoro data through python web scraping

Attempting to automate the process of logging into my etoro account and extracting data from my portfolio using Selenium. Currently working on Google Colab, here is what I have so far: from selenium import webdriver options = webdriver.ChromeOptions() opt ...

pythoncssseleniumweb-scrapingfinance

Setting default selections for mat-select component in Angular 6

I've been attempting to preselect multiple options in a mat-select element, but I haven't been successful so far. Below is the snippet of HTML code: <mat-dialog-content [formGroup]="form"> <mat-form-field> <mat-select pla ...

htmlangulartypescriptangular-material

Select options with disabled sorting feature

Is there a way to use CSS to sort disabled options in a select element? I would like all disabled options to appear at the bottom, with enabled options at the top. In the screenshot attached, you can see that enabled options are black and disabled options ...

htmlcss

Avoiding special characters in URLs

Is there a way to properly escape the & (ampersand) in a URL using jQuery? I have attempted the following methods: .replace("/&/g", "&amp;") .replace("/&/g", "%26") .replace("/&/g", "\&") Unfortunately, none of these are y ...

javascripthtmlescaping

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

What is the most effective way to determine which radio button is currently selected in a group with the same name using JQuery?

<form class="responses"> <input type="radio" name="option" value="0">False</input> <input type="radio" name="option" value="1">True</input> </form> Just tested: $('[name="option"]').is(':checked ...

javascriptjqueryhtml

Displaying a visual representation of time remaining with a countdown progress bar

While browsing online, I stumbled upon a creative progress bar code featured on this particular website. My goal is to implement a countdown timer that displays the remaining minutes and seconds rather than a percentage. In order to achieve this, I have i ...

jquerycss

choose from the list of options that appear above the control

It's strange, but no matter how simple the example is - whether it's regular HTML or Bootstrap - the option list always appears on top of the select control itself. I have no idea why this is happening. Can someone help me with this issue? Here ...

htmlbootstrap-4

The initial child expands in width according to the content until it reaches the boundaries of the parent, triggering the

My goal is to achieve a layout where the parent container's width can vary. The first child element (red) should expand based on its content until it reaches the end of the parent, at which point text-overflow: ellipses should be applied. The second c ...

htmlcss

How can you prioritize one CSS file over another?

To avoid repetition, I wish to have all the classes, tags, and ids from css.css take precedence over bootstrap.min.css, without duplicating any from bootstrap.min.css. <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/css.css ...

htmlcss

Is there a way to create a scroll down and scroll up button that is located outside of the scroll box

A game designer challenged me to create a custom scrollbar with unique up and down button styles, as well as a custom-looking scrollbar. I wanted to achieve this without using the native browser scrollbar on Windows in Google Chrome. I attempted the follo ...

javascriptjquerycsshtmlgoogle-chrome

What is the most effective method for enlarging elements using Javascript?

I have come across many different methods for expanding elements on webpages, such as using divs with javascript and jquery. I am curious to know what the most optimal and user-friendly approach is in terms of performance, among other things. For instance ...

javascriptjquerycsshtml

Using mix-blend-mode with an SVG image within a colored <div>: tips for applying it to the background color of your HTML

I am facing an issue with a SVG file that has mix-blend-mode styles defined on certain elements. The blending is working properly for the elements inside the SVG, but not for the background color of the HTML <div>. For instance: <!doctype html> ...

htmlsvgmix-blend-mode

I am experiencing issues with my three.js script not functioning properly within the context of a

I have been working on implementing a raycaster function in my project that only activates when an entity is visible. To achieve this, I was advised to create a custom script for better control. I have set up all entities and their child entities to be in ...

javascripthtmlthree.jsaframe

Steps for making a grid within a bootstrap 3 modal

I am new to HTML and CSS I'm working on creating a modal content similar to this: https://ibb.co/RvrhmRs Most of the work is done, but my modal currently looks like this: https://ibb.co/1zG0y2t I just need help arranging an icon next to the text. ...

htmlcsstwitter-bootstrap-3grid