The text color on the navigation bar items does not appear to be following the custom CSS

The color of my navigation bar text is not changing. I am using the default navigation bar, I guess. I am very new to Bootstrap and I have searched the internet but nothing seems to work.

/*Navigation bar*/

.menu-bar {
  background-color: #101010;
}

* {
  font-family: 'Poppins', sans-serif;
}

.nav-link {
  font-size: 24px;
  color: #FFFFFF;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d36283629">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">

<div class="header">
  <div class="menu-bar">
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="../assets/Icon.svg" width="32" height="auto"> </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon"></span>
                       </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>

<main>

</main>

<footer>

</footer>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bda3bc">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

I know adding !important in front of the color attribute for .nav-link will solve the issue, but it's generally not recommended as good practice. Despite watching tutorials online, I haven't been able to get it to work for me (even though it works for others :).

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To enhance the styling in your CSS code, consider updating your selector from .nav-link to 

.navbar-light .navbar-nav .nav-link
, like so:

.navbar-light .navbar-nav .nav-link{
    font-size: 24px;
    color: #FFFFFF;
}

Bootstrap applies styles to this element using the more specific selector 

.navbar-light .navbar-nav .nav-link
compared to yours. Remember, in CSS, the most specific selector takes precedence.

You can learn more about CSS Specificity here: https://www.w3schools.com/css/css_specificity.asp

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stiks</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2ccd2cd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
    /*Navigation bar*/
.menu-bar{
    background-color: #101010;
}

*{
    font-family: 'Poppins', sans-serif;
}

.navbar-light .navbar-nav .nav-link{
    font-size: 24px;
    color: #FFFFFF;
}
    </style>
</head>


<body>
            <div class="header">
              <div class="menu-bar">
               <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
                 <div class="container-fluid">
                    <a class="navbar-brand" href="#"><img src="../assets/Icon.svg" width="32" height="auto"> </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                   </button>
                    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                      <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                         <a class="nav-link active" aria-current="page" href="#">Home</a>
                       </li>
                       <li class="nav-item">
                         <a class="nav-link" href="#">Features</a>
                       </li>
                       <li class="nav-item">
                          <a class="nav-link" href="#">Pricing</a>
                       </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                     </ul>
                   </div>
                  </div>
                </nav>
              </div>
            </div>

    <main>

    </main>

    <footer>

    </footer>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364358465847">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</body>
</html>

Answer №2

To customize the header, assign it an ID and adjust the CSS accordingly to control style preferences:

<div class="header" id="myId"> 
#myId .menu-bar{
    background-color: #101010;
}

#myId .nav-link{
    font-size: 24px;
    color: #FFFFFF;
}

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 retrieve the index of an element with a certain class

When I click on an item with a specific class, I want to retrieve its index within that class only. <div class="gallery"> <div class="gallery-item"></div> <div class="gallery-item"></div> <div class="gallery-item ...

javascripthtmljquery

Trouble with the query waypoints extension in a simple demonstration

Can anyone help me figure out why the basic example from the waypoints plugin isn't working for me? Here's a link to the jsfiddle I created: http://jsfiddle.net/ZA8bd/2/ CSS .block1 { margin-top:30px; width: 400px; background: red; ...

javascriptjqueryhtmlcssjquery-waypoints

Adjust the height of the embedded YouTube video iframe

I am trying to adjust the height of a YouTube video that is embedded in my webpage. After going through various threads, I found that adding an additional div outside the iframe element can solve this issue. However, the iframe element is already enclosed ...

htmlcssangularjsiframe

IntelliJ automation in Java does not allow clicking the button

Currently, I am on the PayPal page and I need to automate clicking the agree button. <form id="ryiForm" class="proceed ng-pristine ng-valid" ng-class="{true: 'validated'}[validated]" ng-submit="confirm.$valid && onPay()" novalidate= ...

javacssintellij-ideaselenium-webdriver

Create a page that expands to full height with the ability to scroll

I am trying to achieve a layout using flex that fills the entire height of the screen. https://i.sstatic.net/s1RA5.png My goal is to have a red background that scrolls based on the content inside. If there is more content, I want it to maintain the same ...

cssflexbox

Styling with CSS in Zend Framework

In the process of creating a website using Zend Framework, I have successfully implemented the header, footer, and all the necessary pages. However, I am facing an issue with integrating the CSS file located at public/css/styles.css. When running the webs ...

phphtmlcsszend-framework

Centered flex item with a flexbox grid underneath

Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...

htmlcssflexbox

Different text in AMP

Is there a way to make a line of text quickly fade in, stay visible for 5 seconds, fade out quickly, then have a different line of text quickly fade in, stay for about 5 seconds, fade out quickly, and repeat this process infinitely in AMP? I tried using ...

htmljsonamp-htmlalternatingamp-animation

CSS-Inlined equivalent for an empty td cell

Is there an alternative inline CSS solution for the following CSS selector: table td:empty { visibility: hidden; } What should be used instead of this? <table style="???"> <tr> <td></td> <!-- content will be added late ...

htmlcssinline-styles

Press the button to automatically scroll to a designated div section

One of the challenges I'm facing involves a fixed menu and content box (div) on a webpage. Whenever I click on the menu, the content box should scroll to a specific div. Initially, everything was working fine. Here is a sample of it in action: http ...

javascriptjqueryhtmlcss

Guide to expanding the sidebar width

As I delve into the world of CSS, I find myself puzzled by the issue of expanding the sidebar to ensure that the "Gestion des utilisateurs" section appears on a single line. https://i.stack.imgur.com/xzFEA.png To provide context, I have included an illus ...

css

The POST request is coming back as null, even though it includes both the name and

Having issues with a login PHP code where the post method is returning an empty string. Here is my HTML code: <form action="iniSesion.php" method="post"> <div class="form-group"> <input type="email" name="email_" class ...

phphtmlpost

Link embedded within a list item

How can I make the hyperlink element fill up the width and height of the li element inside? <ul> <li><a href="#" style="display: block; width: 100%; height: 100%;">this link to fill up the li element width and height</a><l ...

jqueryhtmlcss

Animation that responds to scrolling movements

Is there a way to animate text based on scrolling? <p class="class">TEXT</p> transform:translateX(-500px);opacity:0; transform:translateX(0px);opacity:1; ...

javascripthtmlcss

Transfer specified MySQL information to an Excel spreadsheet

I need help with exporting specific data from MySQL to Excel. I've successfully retrieved the necessary data from a MySQL table and organized it as required. https://i.sstatic.net/YZ0y2.jpg What is the best way to export the data from the current pa ...

phphtmlmysqlexcel

Reasons why text does not show color when a style element is applied

I attempted to include a color and font family within an H1 tag using style, but unfortunately it did not work as expected. The color property had no effect on my current line of text. <h1 align="center" style="font-family: Arial, Helvetica, sans-serif ...

htmlstylesfont-family

Incorporating a CSS Stylesheet into an ASP.NET Custom Control

Currently, I am in the process of developing a unique custom control that consists of a combination of tables and buttons. Alongside this, there is an external CSS stylesheet that defines the styles for these specific elements. This control falls under th ...

asp.netcsscustom-controlsstylesheet

Align text columns to the right within flexible rows

I'm currently constructing a grid using flexbox, but I've encountered some border and padding issues leading me to devise the following HTML structure: https://jsfiddle.net/rqmdxcjo/ <div class="flex"> <div class="flex ...

htmlcssflexbox

Effective ways of making mat-toolbar react to Angular modifications

For a while now, I've been struggling to create a simple header for the homepage of my web app using mat-toolbar. However, no matter what I try, I just can't seem to get it to display the way I want. Here's the code I've been working wi ...

htmlcssangular

I can't seem to figure out why my three.js scene refuses to render

I have the following contents in my main.js file: import './style.css'; import * as THREE from 'three'; // Create a new scene const scene = new THREE.Scene(); // Define the camera with arguments for field of view, aspect ratio, and v ...

javascriptcssthree.js