Changing the color of the font in your Bootstrap Navbar 3.4.1

Hello, I'm looking to customize the font color of the links in my Bootstrap navbar. I've attempted to apply specific classes to the navbar as suggested in related posts, but so far I've only been successful in changing the font of the navbar brand. Any advice on how I can achieve this? Could it be an issue with specificity?

  header{
        margin-top: 1em;
        }
    .navbar-main{
        background-color: #00cc99;
    }
    .navbar .navbar-www{
        color: white;
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

      <nav class="navbar navbar-default navbar-main">
                <div class="container">
                    <div class="navbar-header">
                        <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a>
                    </div>
                    <ul class="nav navbar-nav navbar-www">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right"></ul>
                </div>
            </nav>

As a beginner in coding, I'm keen on avoiding the use of !important and am still learning about specificity. Any help is greatly appreciated! Thank you.

htmlcssbootstrap-4

Answer №1

header{
    margin-top: 1em;
    }
.navbar-main{
    background-color: #00cc99;
}
.navbar-www li a{
    color: white !important;
<header> 
        <nav class="navbar navbar-default navbar-main">
            <div class="container">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a>
                </div> 
                <ul class="nav navbar-nav navbar-www">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right"></ul>
            </div>  
        </nav>
    </header>

Answer №2

It's best to steer clear of using !important as it can become a bad habit. To customize the bootstrap CSS for your navbar, consider adding additional classes or maybe even an ID.

Here's a suggestion for changing the color of the navlink text:

.navbar-www.navbar-brand li a{
color:#fff;
}

If the above code doesn't take effect, try incorporating an ID into your navbar and adjust your CSS like this:


#navbar.navbar-www.navbar-brand li a{
color:#fff;
}

To determine the styling applied to the nav link by bootstrap, simply inspect it in the console. To override it, include an extra selector such as a class, attribute, ID, or parent selector.

Answer №3

To enhance the appearance of the link, please update .navbar .navbar-www to .navbar .navbar-www a. See the revised code below:

 header{
        margin-top: 1em;
        }
    .navbar-main{
        background-color: #00cc99;
    }
    .navbar .navbar-www a{
        color: white;
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

      <nav class="navbar navbar-default navbar-main">
                <div class="container">
                    <div class="navbar-header">
                        <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a>
                    </div> 
                    <ul class="nav navbar-nav navbar-www">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right"></ul>
                </div>  
            </nav>

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 conceal an HTML checkbox while displaying its accompanying label

Recently delving into jQuery, I have been exploring how to utilize the jQuery-ui Selectable component as a substitute for checkboxes. http://jqueryui.com/demos/selectable/ I believe I may be able to achieve this if I can discover a method to conceal the ...

jqueryhtmlcheckboxjquery-ui-selectable

Troubles with implementing child routes in Angular 6

I'm having trouble getting the routing and child routing to work in my simple navigation for an angular 6 app. I've configured everything correctly, but it just doesn't seem to be working. Here is the structure of my app: └───src ...

angularhtmltypescriptangular-routing

jQuery Accordian malfunctioning for all elements except the first one in the list

Trying to implement an accordion feature that can be utilized across the entire website. The current logic seems to be partially functional... When I click on any of the accordions, it should open by adding a 'show' class, but this only works for ...

javascripthtmljquerycss

What steps are needed to adjust a modal window so that it perfectly fits the size of the image it contains?

I am currently utilizing Bootstrap 4.2 to create a popup window (modal) featuring an image displayed at its real size (100%) in both width and height, provided that the browser window size permits. If the image surpasses the window dimensions, it should au ...

htmlcssbootstrap-4

Set the styling of a div element in the Angular template when the application is first initialized

I have a question about this specific div element: <div class="relative rounded overflow-clip border w-full" [style.aspect-ratio]="media.value.ratio"> <img fill priority [ngSrc]="media.value.src || ftaLogo" ...

htmlcssangulartypescriptdom

What is the correct way to align these two blocks side by side?

I have an image (https://i.stack.imgur.com/v71LR.png) and I'm trying to achieve a similar layout. Currently, my approach involves using two divs - one for the left column (containing the image) and one for the right column (with heading and paragraph ...

htmlcss

Troubleshooting issues with adding rows to an HTML table

I want to include two buttons at the top of my page: Save and Cancel. These buttons should only appear after clicking the Submit button on the Customer Information panel. However, when trying this, the Customer Information panel is pushed down while I al ...

htmlcssangularjsforms

What are some ways to implement webkit-line-clamp on a website?

I'm trying to shorten my paragraph using the following CSS code: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, the issue is that it condenses everything into one line. I actually want the text to display on 3 lines before t ...

htmlcsswordpressweb

Using angular 7 to apply a dynamic CSS class on a span element

I want to dynamically change the CSS class of a span element in an ngx datatable based on the value. Here is my HTML code: <ngx-datatable #orderinvoice class="bootstrap" [rows]="invoiceSource" [headerHeight]="50" [footerHeight]="50" [rowHe ...

htmlcssangularng-class

Switch out div elements for td elements in HTML code

I have written a code snippet that successfully toggles between showing and hiding content. Here is the code: Simple collapsible Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq ...

htmlhtml-table

Tips on removing pesky favicons

Not too long ago, I purchased a domain and configured it with Wordpress. Eventually, I decided to switch to a static landing page so I uninstalled Wordpress. But now there's an unfamiliar favicon that has appeared on my site. Even after deleting all ...

htmlwordpress

modifying input field with radio button selection in Jquery

Is there a way to set the input field to have a default value and then change it, or disable it with a different value? $("#tax").value(19).prop("disabled",false); $("#tax").value(0).prop("disabled",true); <script src="https://ajax.googleapis.com/aj ...

javascriptjqueryhtml

Preserve input values after form submission in <?php> code block

I would like to retain form values after submission. I have come across some techniques that claim to do just that: However, when I try to run the HTML file, I encounter two issues: firstly, the code does not function as intended and secondly, PHP snippet ...

phphtmlforms

Arranging Divs Inside a Container Div - Dealing with Overflow

I am in the process of developing a website that includes a unique structure that I have not encountered before. This layout involves joining multiple sections within a wrapper. As this is my first time attempting such a layout, I am encountering some chal ...

csshtml

What is the best way to apply a hover rule to a CSS class in order to change the color of a specific row when hovering in

I have managed to successfully apply a classname and add color to a specific row in my react-table. However, I am facing difficulty in adding a hover rule to this className to change the color when I hover over the row. Can someone guide me on how to apply ...

javascriptcssreactjshtml-tablereact-table

Issues have arisen in IE8 with the background gradient on hover elements in the menu, while it functions properly in all other web browsers

Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...

internet-explorercss

Tips for using the window.print() function to display and print another php or html page

<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...

phphtmlcss

Guide to setting up a Datetime picker in Bootstrap 5 user interface

I've been struggling to implement a datetime picker for Bootstrap 5 (my front end is using Bootstrap 5.1.0). While I came across a solution for Bootstrap 3, unfortunately it doesn't seem to work with Bootstrap 5. ...

htmlbootstrap-5datetimepicker

The hamburger symbol (&#9776;) appears as a dull shade on Android screens

Imagine a basic website design featuring a gray background with white text. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> </head> <body style="background: gray; color: white; font-size:50px;" > The t ...

androidhtmlcss

Ways to display a specific section on an HTML page using AngularJS

Main page content <div class="row"> <div class="col-md-3"> link 1 link 2 link 3 . . . </div> </div> <div class="col-md-9"> <div ng-view></div> </div& ...

javascripthtmlcssangularjs