Unable to update navigation link color in Bootstrap 4 styling

<nav id="section_navbar" class="navbar navbar-expand-lg fixed-top">
        <div class="mx-auto my-2 order-0 order-md-1 position-relative">
            <div id="top_logo" class="container-fluid">
                <span>VirtualQR</span>
            </div>
        </div>
        <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#section_navbar">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section_howdoesitwork">How does it work?</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section_pricing">Pricings</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section_contact">Contacts</a>
                </li>
            </ul>

I am facing an issue with changing the color of the nav-link. Despite trying various solutions from other sources, I have been unable to resolve the problem. I suspect there may be an issue within my code that is causing this. Can anyone help me troubleshoot this?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Welcome to Stack Overflow. Here are some tips for you.

/* Styling bootstrap link */

.link{
  color: gray;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Standard -->
<a href="#" class="nav-link">hello</a>

<!-- Use bootstrap color labels -->
<a href="#" class="nav-link text-dark">hello</a>

<!-- Use Inline CSS -->
<a href="#" class="nav-link" style="color: red;">hello</a>

<!-- Use External CSS -->
<a href="#" class="nav-link link">hello</a>

Answer №2

By using this specific CSS selector, you can easily modify the color of the nav-link class.

.nav-link {
  color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<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="5b2b342b2b3e297531281b6a756a6d756b">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>



<nav id="section_navbar" class="navbar navbar-expand-lg fixed-top">
  <div class="mx-auto my-2 order-0 order-md-1 position-relative">
    <div id="top_logo" class="container-fluid">
      <span>VirtualQR</span>
    </div>
  </div>
  <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-1">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#section_navbar">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section_howdoesitwork">How does it work?</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section_pricing">Pricings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section_contact">Contacts</a>
      </li>
    </ul>
  </div>
</nav>

Answer №3

Insert custom CSS directly into each nav link like this:

<a class="nav-link" href="#section_navbar" style="color: red;">Home</a>

Answer №4

Here's a suggestion for you:

.nav-link{
  text-decoration: underline;
}

Answer №5

To implement this styling, you have a few options:

1. Add the following code to your external CSS file:

.nav-link {
  color: red;
}

2. Alternatively, you can include the CSS internally within the head section of your HTML document:

<head>
    <style>
           .nav-link {
              color: red;
            }
    </style>
</head>

3. Another option is to apply the styling inline to the specific element:

<a class="nav-link" href="#section_navbar" style="color: red;">Home</a>

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 to disable the automatic sliding of the Twitter Bootstrap carousel when the page first loads

Is there a way to stop the Twitter Bootstrap carousel from automatically sliding when the page loads, and only start sliding when the next or previous button is clicked? Thank you ...

jquerytwitter-bootstrapcarousel

Looking for assistance with creating a responsive design that works seamlessly on all large devices

Our UI/IX designer has provided a design that I need to replicate. https://i.sstatic.net/8nXym.png I am facing difficulties in centering the circular part of the image. (The vertical line and circular part are separate images) I experimented with using ...

htmlcssbootstrap-5

Preventing Javascript Pop Up from automatically jumping to the top of the page

Upon clicking a button (refer to image below and take note of the scroll bar position), a div pop up is triggered through Javascript. View image: https://docs.google.com/file/d/0B1O3Ee_1Z5cRTko0anExazBBQkU/preview However, when the button is clicked, the ...

javascriptjqueryhtmlcss

The outcome of jQuery's division and multiplication is not correct

When a user inputs data into the form fields, the other fields should be automatically filled with the calculated values. However, it appears that jQuery is treating the input values as strings instead of numbers, leading to incorrect calculations. I&apos ...

htmljquery

Press on the div to reveal its content at the clicked position

Hello, I have a query that I need help with. I currently have a basic table with buttons in columns that act as filters. When you click on one of these buttons, it opens up a form. https://i.sstatic.net/nuEpq.png What I am trying to achieve is to make t ...

javascriptjquerycssbootstrap-4

The $().bind function will not function properly unless the document is fully loaded

Do I need to include $(document).ready() with $().bind? Here is the HTML portion: <head> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript" src=&quo ...

javascriptjqueryhtmlevent-handling

The display of table headers varies in IE7

I am experiencing an issue with a table that has headers, each containing a span element with a background image serving as a separator between the column headers. While the display looks correct on most browsers, on IE7 the separator image (which is with ...

htmlcssinternet-explorer-7

Creating a personalized cursor transition with CSS styling

I have an unordered list (ul) with items on each list item (li) having a different cursor. While it works fine, the transition is not smooth. Is there a way to make the transition from the default cursor to a custom image smoother? HTML <section class ...

htmlcss

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

I am attempting to calculate the ratio of height and width for each image on a webpage. Unfortunately, I am consistently receiving a NaN result and I cannot figure out why. I have been using get() and find() <div class='image-wrapper'> ...

jqueryhtml

Ways to create diagonal or vertical table breaks using CSS

If you have a <table> that is very tall or wide and you want it to wrap for screen display, how can this be achieved using CSS? For example, a table that is 300% page height and 30% page width would be divided into three parts. # # # # # # beco ...

htmlcsshtml-table

issue with fetching response from ajax post call in slim framework 3

Update: The issue has been resolved. The correct localhost address for the ajax request should have been 127.0.0.1 instead of 121.0.0.1 On my client side, I am using the following code to send a POST request to localhost/login. <html> <title> ...

javascriptphphtmlajaxslim

Phaser 3 shows images as vibrant green squares

In my project, I have two scenes: Loading and Menu. In the loading scene, I load images with the intention of displaying them in the menu. Here is the code for the Loading scene: import { CTS } from './../CTS.js'; import { MenuScene } from &apo ...

javascripthtmlhtml5-canvasphaser-framework

Tips for safeguarding against the insertion of scripts into input fields

Is there a method to stop users from inputting scripts into text fields or text areas? function filter($event) { var regex = /[^a-zA-Z0-9_]/; let match = regex.exec($event.target.value); console.log(match); if (match) { $event.pre ...

javascripthtmlvue.jsinputtextarea

I'm noticing that the top border for my span is smaller than the bottom one. What could

I am struggling to create an arrangement of three triangles in a line, with the first and third pointing up and the middle one pointing down. The upper triangle seems to be too small - any ideas on how to adjust this? Is there another way to achieve this ...

htmlcss

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to ensure that all my table images are uniform in size?

Despite creating a table with images all sized 150x150px, I am encountering some inconsistencies where certain images appear larger or smaller than others. Interestingly, when I input the code into JSFiddle, everything appears to be working properly. Howe ...

htmlcsscss-tables

The functionality of the custom file upload button is experiencing issues on Microsoft Edge

I've been working on creating a unique custom image upload button that functions perfectly in Chrome, Firefox, and Opera based on my testing. However, I'm facing an issue where it doesn't work properly in Microsoft Edge. Feel free to check ...

javascriptjqueryhtmlcssmicrosoft-edge

When utilizing "column-count" with "display: flex", both Firefox and IE will only render a single column

I am struggling to achieve a two-column layout with nested columns inside each one. The code I used looks great on Chrome and Safari, but on Firefox and IE, it only displays in a single column: What mistake am I making here? .two-columns { column-cou ...

cssflexboxcss-multicolumn-layoutcolumn-count

How can I show an item repeatedly with each button click in ReactJS?

Currently, I have a setup where I can display a checkbox and its label upon clicking a button. However, the limitation is that only one checkbox can be displayed at a time. Is there a way to modify this so that I can show multiple checkboxes simultaneous ...

javascripthtmlreactjs

`CSS Toggle Smooth Transition Effect`

I am working on creating 2 CSS toggle buttons that currently have a fade in and out effect when clicked. I would like them to have a sliding animation from right to left instead. Below is the HTML, CSS, and a link to a fiddle containing my code. Thank yo ...

htmlcssanimationtoggleslide