Modify the color of text in Bootstrap navigation bar

I am struggling to adjust the text color within my bootstrap links. I attempted the method mentioned in this post, but unfortunately it did not work for me. Can someone please guide me on how to successfully change the text color? Thank you. You can view the complete codepen here.

Syntax:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <img src="images/DISA.png" height="40">
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link">EU34</a></li>
        <li class="nav-item"><a class="nav-link">Support Tracker</a></li>
        <li class="nav-item"><a class="nav-link">Rolling Log</a></li>                
    </ul>
    <img src="images/DISALogoEUROPE.png" style="margin-left: auto; padding-right: 20px;" height="50">
</nav>

CSS Styling:

.navbar.navbar-nav.nav-item li a {
    font-size: 1.5em;
    font-weight: bold;
    color: red;
}

Answer №1

If you want to customize the color, simply override the bootstrap classes.

.navbar-dark .navbar-nav .nav-link {
  color: navy;
}

Additionally, you can adjust the color on hover or focus as well.

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: purple;
}

Answer №2

Utilizing classes in bootstrap is simple. Here's an example:

<div class="container">
  <p class="text-primary">This text is styled as primary color.</p>
</div>

Answer №3

Check out this solution, where we utilize a custom class to overwrite the default Bootstrap class.

.navbar-nav .nav-item .nav-link{
  color:#00cc00
}

View Demo on Codepen

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

Various options can be chosen to alter the margin

$('#cpseltop').change(function() { var a = $(this).val(); $('.cpselhide').hide(); $('#cpsel' + a).show(); }); .cpselect{ display:block; border:1px solid #999; border-radius:9px; outline:none; width:100%; padding:2px 5px; curso ...

CSS magic: reveal on hover!

New to coding and encountering a challenge with my hand-coded website. My goal was for a div to change into an arrow when hovered over since the div acts as an anchor link. However, during the build process, only the paragraph inside the div responds to m ...

Flex items in the center are getting truncated when viewed on a smaller screen size

I have a group of divs in my list, here's an example: .container { display: flex; flex-direction: row; justify-content: center; } When the container is larger than the viewport upon resizing, the first/second items get clipped off. I would like ...

Utilizing SVG and CSS together: Implementing clip-path in a flexbox layout

This task may seem simple to some, but I am struggling to mask an image with an SVG graphic. I have created an SVG with the clipPath element: <svg id="heart-path-container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 ...

The child element with a minimum height of 300 pixels is failing to inherit the height of its parent

Here is the HTML code for a div block I am working with: <div className={'row ge-container'}> <div className={'a-span3 ge-container-navigation'}> hello </div> <div className={'a-span9 ge-containe ...

Prevent elements from collapsing within the Bootstrap 5 grid system

Hey there, happy Friday everyone! I've been working on rebuilding my company's website to learn HTML and CSS. I'm currently creating a replica of the original site and it's going really well so far. However, I've run into some is ...

Ways to remove border when image is not present

I've been attempting to use JavaScript to hide the border, but it doesn't seem to be working. Is it possible to hide the border in HTML using Java? ......................... Check out my page here Here is a snippet of my HTML: <!-- Single P ...

The issue with the JQuery Cookie Plugin is that it is unable to function properly due to the

Although I know there are many similar questions out there, please bear with me. I am not as proficient in JQuery as I am with HTML/CSS, and this is my first time using cookies. On my website, I have a green banner that should disappear when the user click ...

Implementing a Scroll Bar within a Stack Component in Material UI

I've developed a component and now I'm looking to enable scrolling when it expands beyond the screen width <Stack direction="row"> <Stack gap={1} overflow="auto"> {fields.map((el, i) => ( ...

What is the best way to adjust my column position in order to make the links clickable?

Looking for help with a mobile version website menu bar design. The issue is that the central "+" button is covering the two icons on either side, making them unclickable. Is there a solution to rearrange this layout? Here is the current design: https:// ...

The CSS elements are positioned beneath the top border when applying a scale transformation within columns

I have a layout with 4 columns of images that I want to scale on mouse hover using the 'column-count' property. The first column works correctly, but the next three end up positioned under the upper border during the transformation. I've e ...

Failure to submit form in Bootstrap modal

Can someone please help me troubleshoot why the form in the Bootstrap modal is not submitting? This is the HTML code for the modal (sidebar.php) <!-- Beginning of Joel's modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dia ...

Issue with Fluid Square Divs and Box-Sizing

I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code: div{ width:25% padding-bottom:25%; } However, it seem ...

Having trouble with HTML - JavaScript function not processing responseText?

On my website, there is a button array that displays the position of a robot by reading a text file using a php/ajax combo. The script initially sets all buttons to the same color and changes the color of the button to represent the robot's position. ...

I'm facing an issue where I am unable to connect images to specific pages within my carousel using Bootstrap on

Trying to link images in a carousel to pages on my website but encountering issues. Followed advice from other answers (Href in Bootstrap Carousel). Added the necessary href and included the correct .js from the Bootstrap site. The link is on the same host ...

Stopping a parent's event from firing when clicking on child elements without interfering with the child element events

Having read several posts such as this one, I am exploring a method to click on the parent div for it to hide, without hiding when clicking on either the search box or the 'click for event 2' text. I have tried using onclick stop propagation to ...

Inline styles are effective, but external stylesheets are not functioning properly (see JsFiddle for reference)

http://jsfiddle.net/xw0vvo9e/4/ Trying to specify a background color for the navBar. In the provided jsfiddle, the CSS includes: div .navBar { width: 100%; height: 45px; background-color: #FF0000; top: 0px; position: fixed; } However, the background ...

Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus. Below is the jQuery code snippet: $(document).ready(function(){ $('.menu > li').hover(function(){ var position = $(this).position(); ...

How to place a stylish font over an image and recreate hover effects

I am looking to place social media icons below an image next to the photo's title, including Facebook, Twitter, Soundcloud, and Instagram. I want these icons to rotate along with the image when it is hovered over. HTML <div class="polaroid-image ...

Overlaying div above vimeo player

I'm attempting to overlay a div on top of a Vimeo video, a task I anticipated would be straightforward but turns out to be more complex than expected. Below is the HTML code snippet: <div id="wrap"> <iframe id="video" s ...