Home > OS >  How to override CSS styles of Bootstrap for ".navlink"?
How to override CSS styles of Bootstrap for ".navlink"?

Time:02-11

I'm not able to change the color of the ".navlink" to white in my html file. Please help me to change the color of the ".navlink" to white.

<section id="navbar-section">
   <nav  >
       <a href="#" >tent workshop</a>
       <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span ></span>
       </button>
       <div  id="navbarSupportedContent">
           <ul >
               <li  >
                   <a href="#"  aria-current="page">Home</a>
               </li>
               <li  >
                   <a href="#"  aria-current="page">Contact</a>
               </li>
               <li  >
                   <a href="#"  aria-current="page">Products</a>
               </li>
           </ul>
       </div>

   </nav>
</section>

CodePudding user response:

You should always use the selectors that Bootstrap uses to be able to override the color defined by bootstrap. Also, your CSS must be included after Bootstrap.

.navbar-nav .nav-link {
  color: #ffffff;
}

.navbar-nav .nav-link:focus, 
.navbar-nav .nav-link:hover {
  color: #ffffff;
}

OR you override the CSS from Bootstrap by using "!important"

.nav-link {
  color: #ffffff!important;
}

.nav-link:focus, 
.nav-link:hover {
  color: #ffffff!important;
}

CodePudding user response:

would you try this?

<a href="#"  style="color:white;" aria-current="page">Home</a>

style="color:white;" it usually works

CodePudding user response:

<nav  >

Try this . It will make your navigation bar background color to white

  • Related