Alter the color of Bootstrap navigation bar connectors

It seems that I'm experiencing a challenge with the code as I am unable to modify the color of the navigation bar links from black to white.

.navbar-nav .nav-link active {
  color: #FFFFFF;
}

body {
  color: #FFFFFF
}

.collapse .navbar-collapse {
  color: #FFFF;
}

nav .navbar {
  color: #FFFF;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light " style="background-color:#670303" style="color:#FFFF">
    <div class="container">
      <a class="navbar-brand" href="#"> <img src="logo.svg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup" style="color:#FFFF">
          <div class="navbar-nav">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="false">Disabled</a>
          </div>
        </div>
  </nav>

















  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8a8b7a8a8bdaaf6b2ab98e9f6e9eef6e9">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>




</body>

</html>

The issue with the navbar lies in my inability to change the default color, which is currently black, to white. Strangely enough, despite adding color values to specific classes, the color remains unchanged.

htmlcssbootstrap-4

Answer №1

To make changes to the existing already-implemented class with bootstrap, you need to override it.

The usage of 

.navbar-light .navbar-nav .nav-link
specifies the appearance of the navigation links in your hamburger menu, requiring color modifications.

For color variations during events like hover, focus, etc., it is recommended to use !important on the color CSS attribute for easy implementation.

.navbar-light .navbar-nav .nav-link {
  color: #FFFFFF !important;
}


.navbar-nav .nav-link active {
  color: #FFFFFF;
}

body {
  color: #FFFFFF
}

.collapse .navbar-collapse {
  color: #FFFF;
}

nav .navbar {
  color: #FFFF;
}

.navbar-light .navbar-nav .nav-link {
  color: #FFFFFF !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light " style="background-color:#670303" style="color:#FFFF">
    <div class="container">
      <a class="navbar-brand" href="#"> <img src="logo.svg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup" style="color:#FFFF">
          <div class="navbar-nav">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="false">Disabled</a>
          </div>
        </div>
  </nav>


  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c3dcc3c3d6c19dd9c0f3829d82859d82">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>




</body>

</html>

Answer №2

If you need to override styles from Bootstrap, just remember to use !important after your value

.navbar-nav .nav-link{
  color: #FFFFFF !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap</title>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light " style="background-color:#670303" style="color:#FFFF">
    <div class="container">
      <a class="navbar-brand" href="#"> <img src="logo.svg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup" style="color:#FFFF">
          <div class="navbar-nav">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="false">Disabled</a>
          </div>
        </div>
  </nav>




  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4a554a4a5f481450497a0b140b0b0c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>




</body>

</html>

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

How can text be extracted from BeautifulSoup without displaying the opening tag and before the <br> tag?

I have recently started learning Python and Beautiful Soup, and I've spent a significant amount of time trying to solve this particular issue. I am looking to extract three specific text elements from a <div> that does not have a class attribu ...

pythonhtmlparsingbeautifulsouphtml-parsing

PHP data insertion using filters and validation

I have created a database and implemented a validation system to ensure that fields are not left empty. If the fields are filled and pass through the sanitization function, I then proceed to save the data in the database. <?php // Define variables as ...

phphtml

How to Align Title in the Center of a Section Containing Multiple Images?

I have a situation where I am using a StyledHead section to display 10 images from an API. The images are wrapped in another section called StyledHeader, which also contains an h1 element. How can I center the h1 element both vertically and horizontally so ...

cssreactjsstyled-components

Is there a way to determine if the Acrobat plugin is installed and the web viewer setting is enabled using jQuery and C#?

Is there a way in jQuery or C# (as I am currently working on an .aspx page in Sharepoint 2010) to detect if the Adobe Acrobat plugin is installed and if the web viewer setting is enabled? I understand that the plugin is usually installed with Adobe Reader ...

c#jqueryhtmladobe-reader

Implementing an Onclick function in HTML

I have an HTML code and I am looking to add an onclick event for a button named GET DATA. When the button is clicked, I want to send data for userId and categoryId to a PHP file. Can someone help me implement this functionality in my existing code? Here ...

javascripthtmlajax

What is preventing me from utilizing the Jquery show() method within a Div's onclick event without incorporating data-toggle="dropdown"?

I am facing an issue with a div that should act like a button. When this div is clicked, another hidden div is supposed to be displayed. However, the behavior is not as expected. I have included the data data-toggle="dropdown" attribute in the div acting a ...

javascriptjqueryhtmlcss

Shifting text upwards within a document

I'm struggling with CSS and bootstrap as I have limited knowledge in this area. I have multiple divs on a page that I want to align based on our old website design. The problem I'm facing is that one div is larger on the right, causing a lot of ...

htmlcsstextbootstrap-5whitespace

Incorporating a wide banner with seamless responsiveness using Bootstrap framework

I'm currently working on customizing a bootstrap template to incorporate a full-length 1200 px banner at the top, in place of the smaller 120 x 60 images/logo-company.png logo that is featured on the original website. My attempts so far have been uns ...

htmlcsstwitter-bootstrapresponsive-designbanner

What could be causing the svg to not be visible inside the div?

I am struggling to display an SVG element within a div as it is not visible at all. Can someone help me make the SVG visible in the div? Here is a link to the code: http://codepen.io/helloworld/pen/HjkhK <div style="height:100px;background:yellow;"> ...

htmlcsssvg

The SVG image exceeds the boundaries of the parent column div in bootstrap

I am struggling to make a SVG fit inside a column in a bootstrap div with col-lg-4. I tried using img-fluid, but it did not work as expected. The SVG should automatically adjust its size to fit the parent div. However, that is not happening. .star-ratin ...

htmlcsstwitter-bootstrapsvgbootstrap-4

Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...

javascripthtmljquerycssfrontend

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

javascriptjqueryhtmlcssopacity

Samsung mini devices experiencing issues displaying Unicode symbol (25be)

I'm currently facing an issue with an iconfont that I have included in my website. I am using Unicode symbols for the characters of the icons, and most of them are displaying correctly. However, there are a couple that are showing up as blank on the s ...

androidcssunicodeicon-fonts

Building a Horizontal Line Component in ReactJS

Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided. https://i.sst ...

cssreactjsmaterial-uireact-hooksjss

Using jQuery to switch between different content divs

I'm trying to create a script that allows users to toggle between different posts, showing one at a time. However, I'm running into an issue where clicking on a new post doesn't hide the content of the previous one. How can I modify the code ...

jqueryhtmlcss

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

The sub-menu options are constantly shifting... How can I keep them in place?

Here we go again... I'm having trouble with my sub-menu elements moving when I hover over them. I've searched for a solution but haven't found anything helpful. The previous advice I received about matching padding and adding transparent bo ...

htmlcss

"Surprising quirks in the functionality of Bootstrap's image gallery

My goal is to create a matrix layout of 30 group member photos using HTML, CSS, and Bootstrap. Unfortunately, some of the photos are not aligning properly and are appearing in the wrong block, leaving some blocks empty. All the photos have the same aspect ...

htmlcssbootstrap-4

Content from ajax request is invalid

Currently, I am facing an issue with loading a comment list and replacing the existing list on my HTML page with the new one. Previously, I used to load a simple XML list, iterate over its elements, and generate content. Although this method worked fine, i ...

jqueryhtmlajax

Can a javascript code for "Infinite Scroll" be created to manage the back button?

Head over to this website: Experiment with the infinite scroll feature. You may notice that when you click a link and then press "back", there are some glitches. Therefore, I am considering developing my own version of an Infinite Scroll functionality. ...

javascriptjqueryhtmlcsstemplates