Bootstrap Navbar Links not coloring properly

bootstrap 4 navbar hover color
bootstrap 4 navbar right
bootstrap navbar-toggler-icon
bootstrap navbar template
bootstrap navbar container
bootstrap left navbar
bootstrap navbar-right
bootstrap 4 navbar active ( color)

So I'm using a Bootstrap Navbar for a website I'm making and when I try to change the color of the links, it only changes one.

I have already tried using different class names and removing unnecessary classes.

HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item colorMe">
        <a class="nav-link" href="members-login">Members</a>
      </li>
      <li class="nav-item colorMe">
        <a class="nav-link" href="lifeguard-login">Lifeguards</a>
      </li>
    </ul>
  </div>
</nav>

CSS:

.colorMe{
    color:darkgreen !important;
}

When I try and do this, the one link that changes is the one that says "About Us". Thanks!


Your .colorMe class exists on the link for About Us, but on the list item parent of the other two. Just move that class from the list item to the link and it works.

Bootply example

The reason it doesn't work while only on the list item parent is because Bootstrap already has a more specific selector, .navbar-light .navbar-nav .nav-link, that overrides your CSS.

How to align navbar items to the right in Bootstrap 4 ?, How do you change the color of the navbar in Bootstrap? Bootstrap navbar not rendering properly. The CSS link I'm using works fine too. I'm a beginner so any help would be really appreciated. Change navbar color in


It is because you put classes to <li> element instead of <a>. Hope it helps.

.colorMe{
    color:darkgreen !important;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item ">
        <a class="nav-link colorMe" href="members-login">Members</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link colorMe" href="lifeguard-login">Lifeguards</a>
      </li>
    </ul>
  </div>
</nav>

How to change navigation bar color in Bootstrap ?, : #0f0; //green // Core variables and mixins @import "variables"; @import "mixins"; . The CSS is the bootstrap css and a few custom styles. I've included the same Javascript that is included in the first part of the Bootstrap tutorials, the ones where Guil goes over the dropdown menus. So confused! :S


update the class colorMe to a element instead of li

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link colorMe" href="members-login">Members</a>
      </li>
      <li class="nav-item">
        <a class="nav-link colorMe" href="lifeguard-login">Lifeguards</a>
      </li>
    </ul>
  </div>
</nav>

How can I change link color and hover color in Bootstrap version 4 , How do I align navbar to right in bootstrap 4? In this tutorial, I am going to show you examples of built-in Bootstrap color classes for various elements. The Bootstrap has specific classes for coloring the text, links, buttons etc. text example background links navbar. Generally, the class names use the context that may reflect the purpose of the text or some other element.


Bootstrap 4 align navbar items to the right, I'm struggling to change the background-color on my bootstrap nav using css. I'​ve tried assigning an id and altering that in css to no-avail. instead of the nav element and the background-color should apply correctly. As for the active status of the navbar's links, check out the Bootstrap's Scrollspy plugin. Navbar brand class as seen in dev tools. Inside the navbar div, first you have a navbar-brand link for the site title and/or a logo, (this is not required, you can remove it if you want to, but it


Change bootstrap "nav" color?, How to customize the navbar color in Bootstrap 4. Change link color, active or hover color, brand and/or background color. Codeply example. .navbar-brand for your company, product, or project name..navbar-nav for a full-height and lightweight navigation (including support for dropdowns)..navbar-toggler for use with our collapse plugin and other navigation toggling behaviors..form-inline for any form controls and actions..navbar-text for adding vertically centered strings of text.


Bootstrap 4 change navbar color: links,hover,brand on Codeply, How to change the Bootstrap 4 Navbar color example. Change the navbar color, link colors, toggler icon color, dropdown menu and more. Codeply example. Bootstrap navbar is a horizontal navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.