Modify font color in collapsed state of bootstrap navbar dropdown

I've been attempting to modify the font color displayed in the image to ensure it stands out clearly. https://i.sstatic.net/e6VdG.png

This is a simple bootstrap 3 navbar. Here's the HTML code:

<nav class="navbar navbar-custom">
    <div class="container">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-spacer"></div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="first"><a href="/">Home</a></li>
                    <li class="dropdown ">
                        <a href="link1.htm" class="dropdown-toggle" data-toggle="dropdown">Item 1<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="link1-1.htm">Item 1-1</a></li>
                            <li><a href="link1-2.htm">Item 1-2</a></li>
                            <li><a href="link1-3.htm">Item 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="link2.htm">Item 2</a></li>
                    <li><a href="link3.htm">Item 3</a></li>
                    <li><a href="link4.htm">Item 4</a></li> 
                </ul>
            </div>
        </div>
    </div>
</nav>

Below are the attempts I made to change the font color:

@media (max-width: 767) {
  .dropdown-menu > li > a{
    color: #ffffff !important;
  }
  .navbar-custom .container .container-fluid .navbar-nav .open .dropdown-menu > li > a  {
    color: #ffffff !important;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a,
  .navbar-custom .navbar-nav .open .dropdown-menu {
    color: #ffffff !important;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #b0cb36;
    background-color: transparent;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #b0cb36;
    background-color: #003748;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
}

Despite all my efforts, the dark font remains unchanged and I couldn't make it lighter.

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

The issue lies within your media query - it is missing the unit, for example: @media (max-width: 767px)

Once you correct that, all you need to do is use a more specific selector to override the Bootstrap CSS rather than relying on !important. The selectors that need overriding are:

  • .dropdown-menu>li>a
  • .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover

Simply adding the .navbar-nav class should suffice, like so: 

.navbar-nav .dropdown-menu>li>a
- keep it moderately specific as it can make future overrides more challenging.

Here's a functional example (I removed the collapse class for easier viewing):

@media (max-width: 767px) {
  .navbar-nav .dropdown-menu>li>a {
    color: red;
  }
  .navbar-nav .dropdown-menu>li>a:hover,
  .navbar-nav .dropdown-menu>li>a:focus {
    color: lime;
    background-color: transparent;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-custom">
  <div class="container">
    <div class="container-fluid">
      <div class="navbar-header">
        <div class="navbar-spacer"></div>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      </div>
      <div id="navbar" class="">
        <ul class="nav navbar-nav">
          <li class="first"><a href="/">Home</a></li>
          <li class="dropdown ">
            <a href="link1.htm" class="dropdown-toggle" data-toggle="dropdown">Item 1<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="link1-1.htm">Item 1-1</a></li>
              <li><a href="link1-2.htm">Item 1-2</a></li>
              <li><a href="link1-3.htm">Item 1-3</a></li>
            </ul>
          </li>
          <li><a href="link2.htm">Item 2</a></li>
          <li><a href="link3.htm">Item 3</a></li>
          <li><a href="link4.htm">Item 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Answer №2

To change the color of the dropdown menu items, you can add the class "text-danger" or any other color class that you prefer. If this doesn't work, you can also try adding the class individually to each li element.

<nav class="navbar navbar-custom">
    <div class="container">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-spacer"></div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="first"><a href="/">Home</a></li>
                    <li class="dropdown ">
                        <a href="link1.htm" class="dropdown-toggle" data-toggle="dropdown">Item 1<span class="caret"></span></a>
                        <ul class="dropdown-menu text-danger">
                            <li><a href="link1-1.htm">Item 1-1</a></li>
                            <li><a href="link1-2.htm">Item 1-2</a></li>
                            <li><a href="link1-3.htm">Item 1-3</a></li>
                        </ul>
                    </li>
                    <li><a href="link2.htm">Item 2</a></li>
                    <li><a href="link3.htm">Item 3</a></li>
                    <li><a href="link4.htm">Item 4</a></li> 
                </ul>
            </div>
        </div>
    </div>
</nav>

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

Ways to update row background color based on specific column values

I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...

javascriptcssdatatable

What's preventing me from tapping on hyperlinks on my mobile device?

I'm currently working on a website (saulesinterjerai.lt) and everything seems to be functioning properly, except for the fact that on mobile devices, the links aren't clickable and instead navigates to other layers. How can I disable this behavio ...

javascriptcssclicktouch-event

What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/ I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any a ...

jquerycssjquery-animateheight

Is it possible to comment out classes within a specified class attribute? How can this be achieved?

Is there a way to temporarily omit specific classes within HTML (<div class="" ...>)? For instance: <div data-group="group1" data-container="true" class="container-lg d-flex /* slider */ p-0"> In this s ...

htmlcss

Emphasize a specific portion of the text

While developing a project similar to Google Search using React.js and GoogleAPI, an issue arose. For instance, when searching "tea" on Google, the results display "Searches related to tea" at the bottom. The term "tea" appears in bold. How can this be imp ...

htmlcssreactjsgoogle-api

Unexpected behavior in the AngularJS UI Bootstrap datepicker causing dates to shift

Hi there, I have encountered an issue with setting the default date format (YYYY-MM-DD) in the UI Bootstrap datepicker input field using momentjs. Everything seems to display correctly until I try to console log the selected date. It appears that an additi ...

javascriptangularjstwitter-bootstrap

Firefox failing to display input placeholder text properly when wrapped

I've been working on making my placeholder text wrap to the next line in an input field. While I found solutions that work in Chrome, I'm struggling to get it right in Firefox. After researching on Stack Overflow, I came across this question: P ...

htmlcssfirefoxinput

Manipulating strings within strings with JavaScript

It's been a strange discovery I made while working with JavaScript. Whenever I try to assign a two-word string to a CSS property, like setting the fontFamily property of an HTML element to "Arial Black", it ends up looking something like thi ...

javascriptcssstring

Only the first column of a row in Flexbox will have a line break when exceeding the

Currently, I am utilizing flex with a row direction for a set of items with fixed widths causing overflow and a horizontal scrollbar, which is the desired outcome. Nevertheless, my requirement is for the first column in these rows to be full-width, while ...

javascriptcssflexboxcss-gridflexboxgrid

Webpage Text Animation

This is the visual representation of my webpage: https://i.stack.imgur.com/tYq34.png I am seeking to implement a uniform animation effect for the text "Carlos Qiano" and "Lorem Ipsum", similar to the link below: https://i.stack.imgur.com/XVnBS.jpg Note: ...

javascripthtmljquerycssanimation

Clear backdrop with solid objects

I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...

htmlcssbackgroundopacity

Angular is not properly integrating Bootstrap features

I've been attempting to create bootstrap accordion items, but unfortunately they're not functioning correctly as shown in the Bootstrap documentation or YouTube tutorials. In my angular.json file, I have included both bootstrap and jQuery for te ...

cssangularnode-modulesbootstrap-5

If the progress bar in AngularJS reaches 100%, the "active" class will be automatically removed

How can I remove the bootstrap 'active' class from the progress bar once it reaches 100% to stop the stripes from moving? I tried this, but it's not working: <div class="progress progress-striped active" style="margin-bottom: 0;" n ...

angularjstwitter-bootstrapprogress-bar

Displaying the current time and total time of a custom video player using Javascript

Currently, I'm in the process of creating an html5 video player and have incorporated javascript to update the current time as a fraction of the total time. The script I've written so far is as follows: function updateTime() { var curTime = ...

javascriptcsshtmlvideo

Transforming the navigation menu using CSS, HTML, and jQuery

One challenge I am facing involves creating a menu similar to the one on http://edition.cnn.com/. I want the clicked button in the menu to receive focus, while the others lose it. Despite trying various methods, I have not been successful. Can someone off ...

javascriptjqueryhtmlcss

The left border is failing to appear on the Td element

When attempting to add border styling to td elements, the left border is not displaying correctly. This issue seems to vary across different browsers. Here is the HTML code: <table class="table-bordered"> <thead> <tr> ...

javascriptjqueryhtmlcss

clicking on internal links in the bootstrap side menu causes it to jump

Im trying to add a side menu to a help page. The menu and internal links are functioning properly, but when clicked, the side menu partially goes behind the navbar. As a beginner, I'm not sure how to resolve this issue. Can someone offer some guidan ...

javascriptjqueryhtmlcsstwitter-bootstrap

Contrasting the distinctions between a pair of CSS class declarations

After using my customized CSS class named myclass alongside Bootstrap's built-in class container, I have a question about how to declare a div element with both classes. Should I go with: <div class="myclass container">some code</div> o ...

htmlcssbootstrap-4twitter-bootstrap-4

Deleting images based on their class through a loop

Currently, I am in the process of constructing a carousel using data retrieved from an endpoint. The challenge I face is determining the appropriate image size to request from the server. To address this, I perform some front-end processing to dynamically ...

javascriptjquerycssimagehttp

Incorporate a horizontal scrollbar feature within an HTML section

Currently, I am in the process of learning vue js and would like to create a layout that includes two sections. The first section should occupy 3 grids on the screen, be fixed, and not scrollable, with a division into 4 vertical parts. The second section s ...

javascripthtmlcssvue.jsscrollbar