Is it Possible to Customize the Font Color of the Bootstrap Disabled Class in Bootstrap 4?

I am currently using version 4.4.1 of the Bootstrap gem for my Rails application which includes a Bootstrap 4 navbar. Below is a snippet from my navbar code:

  <ul class="navbar-nav ml-auto">
    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
    <li class="hidden"> <a href="#top"></a> </li>
    ..........
    <li class="nav-item nav-link"><%= link_to "#{t :link_story}", story_path %></li>
    <li class="nav-item nav-link disabled"><%= link_to "#{t :link_blog}", blog_path %></li>
    <li class="nav-item nav-link disabled"><%= link_to "https://www.facebook.com/xxxxxxxx/", target: "_blank" do %><i class="fab fa-facebook-f"></i><% end %></li>
    <li class="nav-item nav-link disabled"><%= link_to "https://twitter.com/lightbecorp", target: "_blank" do %><i class="fab fa-twitter"></i><% end %></li>
  </ul>

The use of the disabled class prevents clicking on links, which suits my purpose. I aim to have these links appear gray.

Below is the CSS code, with the last line attempting to change the font color:

.navbar-custom { padding: 0; border-bottom: 0; letter-spacing: 1px; background: $navBackColor; text-transform: uppercase; }
.navbar-custom .navbar-brand { text-transform: capitalize;  }
.navbar-custom .navbar-brand:focus { outline: 0; }
.navbar-custom .navbar-toggler { color: #eee; font-size: 129%; border-radius: 2px; padding: 0 4px; }
.navbar-custom .navbar-toggler:hover, .navbar-custom .navbar-toggler:focus { background-color: #e75926; color: #ffffff; }
.navbar-custom .navbar-brand .navbar-toggler:focus, .navbar-custom .navbar-brand .navbar-toggler:active { outline: 0; }
.navbar-custom a { color: $linkColor; font-weight: bold; }
.navbar-custom i.fas { color: $red; font-weight: bold; }
.navbar-custom .navbar-nav li a { -webkit-transition: background .3s ease-in-out; -ms-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out;  transition: background .3s ease-in-out; }
.navbar-custom .navbar-nav li a:hover { outline: 0; color: $linkColorHover; background-color: transparent; }
.navbar-custom .navbar-nav li a:focus, .navbar-custom .nav li a:active { outline: 0; background-color: transparent; color: $linkColorHover; }
.navbar-custom .navbar-nav li.active { outline: 0; }
.navbar-custom .navbar-nav li.active a { background-color: rgba(255,255,255,.3); }
.navbar-custom .navbar-nav li.active a:hover { color: $linkColorHover; }
.navbar-custom .navbar-nav li .disabled { color: $grayDisabled; }

I have attempted various methods to no avail:

.navbar-custom .disabled { color: $grayDisabled; font-weight: bold; }

.navbar-custom a { color: $linkColor; .disabled { color: $grayDisabled; font-weight: bold; } font-weight: bold; }

.navbar-custom .navbar-nav li a.disabled { color: $grayDisabled; }

.navbar-custom a.disabled { color: $grayDisabled; font-weight: bold; }

All references found relate to Bootstrap 3 where pointer-events: none; was used in the stylesheet. The .disabled class utilizes pointer-events: none;.

To maintain consistent styling while changing only the font color of certain items, I intend to use classes .nav-item and .nav-link.

The documentation does not specify restrictions on changing the font color of a class. How can this be achieved?

Answer №1

Modify the final line to:

.navbar-custom .navbar-nav li.disabled a { color: $grayDisabled; }

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

Choosing individual child elements, with matching names, from two distinct parent elements with identical names

As a beginner in coding, I understand that my code may be messy and redundant, so I apologize for any confusion it may cause. I am working on adding the final piece to my navigation bar. Below is the HTML code, and a fiddle link will be provided at the en ...

Using an external JavaScript script may encounter difficulties when loading pages with jQuery

Trying to utilize jQuery for loading html posts into the main html page and enabling external scripts to function on them. Utilizing a script (load.js) to load posts into the index.html page: $(document).ready(function () { $('#header').loa ...

Develop a container element with protective measures against external CSS styles impacting internal elements

As I work on integrating my webpage code into a large project, I have encountered an issue. The entire project code is contained within a div element inside the <main> tag. However, when I add this container div within the <main> tag, the pro ...

Explore bar with search button

I'm facing an issue with the code I have for searching on my website. Currently, when a user fills in their search word and presses enter, it executes the command. However, I would like to only run the search script when the user clicks a button inste ...

the ajax success function is malfunctioning

I'm encountering an issue with my ajax function. I am trying to change the CSS for certain HTML elements on 'success', using the following code: success:function(d){ $('#name').css('weight','normal'); ...

What could be causing my Flask application to malfunction after integrating Bootstrap?

As a newcomer to Flask, I decided to create a simple application that adds names to an unordered list. Users can input the names through a text field and click a button to add them. Initially, everything was working smoothly without Bootstrap. However, as ...

Arranging divs within a wrapper, ensuring that one of them displays a vertical scrollbar when the content exceeds the space available

I'm currently facing a challenge with defining the height of the description box in order to achieve the layout shown. I am trying to find a solution without relying on javascript. https://i.stack.imgur.com/3j278.png At present, the wrapper and titl ...

Beginner experiencing website overflow problem

After completing a basic web development course, I decided to create my first homepage. While I am satisfied with how it looks on a PC or laptop, the layout gets messy on mobile devices. I tried using <meta name="viewport" content="width= ...

The issue with Angular 2's Parameterised router link component not fully refreshing

I'm trying to figure out how to show a set of images when I click on a specific menu item. The menu structure looks like this: <ul id="demo23" class="collapse"> <li> <a [routerLink]="['image-gallery','Picasso ...

When the filter feGaussianBlur is applied to an SVG circle, it disappears on Safari but not on Chrome

While implementing the filter with feGaussianBlur to an SVG circle, I encountered a peculiar issue. It works perfectly on Chrome, but unfortunately, the circle disappears when viewed on Safari. https://i.sstatic.net/k916B.png https://i.sstatic.net/5Bfp9. ...

PHTML file IIS handler

I was surprised by the lack of online results when searching for a solution to my issue. In my local PHP project, I am encountering problems with PHTML files not being parsed correctly by IIS. The 'phtml' type is not included in the module mappin ...

Combining DataTables with multiple tables sourced from various JSON arrays

I am trying to display data from two different arrays within the same JSON source in two separate tables, but my code seems to be malfunctioning. JSON Information: { "Policies": [ { "name": "A", "id": "1", "score": "0" } ], ...

The function is not recognized in C# programming language

Whenever I try to trigger functions by clicking buttons, nothing seems to happen and an error message appears in the console. Uncaught ReferenceError: AddressInputSet is not defined at HTMLButtonElement.onclick I'm new to this and could use ...

Add the component view to the webpage's body section

Using Angular 7 and ngx-bootstrap 4.0.1 Dependencies: "bootstrap": "3.3.7", "bootstrap-colorpicker": "2.5.1", "bootstrap-duallistbox": "3.0.6", "bootstrap-markdown": "2.10.0", "bootstrap-progressbar": "0.9.0", "bootstrap-slider": "9.8.0", "bootstrap-tags ...

When a user repeatedly clicks the "see more" button, they will continue to receive no results multiple times

I have created a partial view and added the rendering in the Index page. A button (See More) triggers an AJAX call to the controller each time it is clicked, appending new data to the screen. The issue arises when there are no results left to display, and ...

Creating a for loop using jQuery to append the value of [i] to the string "id" for the element

As a newcomer to programming, my code may not be the best. I am attempting to automate game results (1 / X / 2) based on the input of home and away goals in a form. To achieve this, I need assistance with my jQuery for loop. Here is the current code: for ...

Changing the color of the Bootstrap-Vue b-dropdown button when it is open

When it comes to customizing the button color and hover effect, the code below does the job perfectly. However, there seems to be an issue where the button color reverts back to gray when the menu is open and the cursor moves away from the button. How can ...

Incorporate videos from platforms like Youtube, Vimeo, and more

I am looking to add videos to my website without hosting them on my server. I want the flexibility to use links from any source, not just YouTube or Vimeo. Is there a way to achieve this using something similar to an iframe? <iframe width="560" heigh ...

Adding JSON data to an array in Angular JS using the push method

I am encountering difficulties with adding data to an existing array. Currently, I have set up a table to display the data, but I want to also include the data in the table when a user enters an 8-digit barcode. Factory angular.module('app.pickU ...

Using HTML and C# to Deliver Emails

I've encountered a challenge with my HTML page that includes a textbox for users to input their email. When the submit button is clicked, an email should be sent to a specific email address defined in the code, and a pop-up box indicating "Email Sent" ...