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

Managing excess space in a flexbox: Tips for handling events

Is there a way to manage events triggered by clicking on the violet-colored space around elements? I tried adding a general onclick event to the container, but it seems to be interfering with the individual item behaviors that already have their own intern ...

htmlcssreactjsflexboxmaterial-ui

Unleash the power of WordPress Revolution Slider captions with exclusive CSS styling

Struggling with adding custom captions? I'm using a Multisite WordPress setup and trying to avoid editing the captions.css file in the plugins folder. Here's what I attempted: .rev_slider .tp-caption .my_head{ position: absolute; ...

csswordpress

Changing <br> to a newline ( ) using JSOUP

Is there a way to efficiently replace all occurrences of <br> with a new line character (\n) in HTML using Jsoup? I'm looking for a clean solution that will result in the Element#text() outputting plain text without any HTML, but with &bsol ...

htmljsoup

Adding a CSS style to a specific child element

Here is an example snippet <html> <head> <style> .test > input { //this selector is incorrect. color:red; } </style> </head> <body> <div class="test"> <di ...

htmlcss

Discord between Bootstrap tabs and C3 charts: A Compatibility Str

On my website, I have implemented Bootstrap navigation tabs that each contain a chart. The issue I am facing is that when I navigate to the home page, the chart in the active tab displays perfectly fine. However, for the other tabs, the charts overlap with ...

javascriptjqueryhtmlcssc3.js

When the window is resized, the div shifts position

I recently added a div to my website with the following code: <div id="div"></div> #div { height: 400px; width: 300px; position: absolute; right: 59%; text-align: left; } Howe ...

htmlcss

Is it possible to enable auto-completion for IDs in a separate CSS file using WebStorm 7?

I am new to using WebStorm 7 and currently working on building a simple HTML/CSS website. Initially, I included my CSS within the HTML file using the style tag, but now I have decided to move it to a separate file. Auto completion is functioning for all h ...

htmlcsswebstorm

Mastering the CSS Art of Working with Sprite Images and Their Positioning

I am currently working on an educational project as a front-end developer, where I aim to clone the Google homepage. To achieve this, I am utilizing Google's own sprite and here is the image of the sprite that I am using. https://i.stack.imgur.com/YT ...

htmlcsssasssprite

CSS creates captivating image hover transitions with span elements

<a href=""><img src=""><span>content</span></a> When I hover over the image, the content within the span appears using relative positioning with display set to none and absolute positioning in the span tag. My query is regard ...

htmlcsscss-transitions

Utilizing jQuery to retrieve multiple values from a select box through the onchange event

I have two select boxes with JavaScript on them. When I use filter1, my URL changes to www.url.com/&filter[]=6827 and it works perfectly. The selected option also works without any problems. However, I want a new select box like filter2 with multiple f ...

javajqueryhtmldrop-down-menujquery-selectbox

Tips on showcasing the elements within a div container using flexbox

Seeking advice on positioning items/cards using flexbox in my initial react app. The issue lies with the div within my card component where applying display: flex; turns every card into a block (column-like) structure, flexing only the content within each ...

javascriptcssreactjsflexboxcss-position

Unexpected results from the match() function

Attempting to utilize the RegExp feature in Javascript (specifically with the match function) to locate instances of a sentence and a specific word within that sentence embedded in the HTML body. Provided is some pseudo-code for reference: <!DOCTYPE ...

javascripthtmlregexmatch

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...

javascripthtmljquerycss

An unusual 1px variance appears in the background-image on Internet Explorer

Having trouble with a sprite of two images showing a 1px difference in ALL versions of Internet Explorer, yet working perfectly in Firefox. Check out the demonstration here: http://jsfiddle.net/bHUs3/6/ I'm feeling frustrated. What could be causing ...

jquerycssinternet-explorer

Center the text within a span element in an inline-block container

I'm currently working on a website design that features a flat aesthetic. I have a header at the top and two blocks of different colors placed side by side underneath it. Initially, I attempted to use float left and right for positioning but was recom ...

htmlalignmentvertical-alignmentcss

Customizing a unique dropdown navigation experience

I have very limited experience with using jQuery and CSS. I recently came across the DropIt jQuery plugin files (accessible at ) and decided to integrate it into my Ruby on Rails project. Unfortunately, I am struggling with implementing the "Hover Me" exa ...

jquerycss

Vertically center text in an email within a div using HTML

i'm struggling to perfectly center the text within a div in an HTML email. While it appears fine in Browserview with proper line-height, issues arise in Apple Mail and Outlook where it doesn't align vertically. <div style='width: 80%; ...

htmlcssoutlookhtml-emailtext-align

Dynamic scrolling text for overflowing text display

Here's a scenario I'm facing: Let's say I have three div tags, each 100 pixels wide: <--- DIV WIDTH ---> Text in div 1 Text in div two, it overflows Text in div three <--- DIV WIDTH ---> Currently, I've set the following C ...

javascriptjqueryhtmlcssmarquee

Populate an HTML select with data as users click the create button

Encountering an issue when loading data into an HTML select after users press or click a button. The situation is as follows: A button is available to create another button dynamically Upon clicking the created button, a form is displayed Once the form i ...

phpjquerymysqlhtmlajax

What is the best way to ensure that a React app is always displayed in full screen

I am facing an issue while developing an app with React and Material UI. I am trying to display the app in full-page mode, but unable to achieve it successfully. Currently, it appears like this: Here is my code snippet from App.js: import 'typeface- ...

javascripthtmlcssreactjsmaterial-ui