Change text color of navbar bootstrap4

Question

Change text color of navbar bootstrap4

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a bootstrap navbar 4 but I want to change the color of the text but it does not leave me, I'm trying to call from the CSS the class that contains the text and nothing that lets me change the color, it only leaves me if I change it directly from the HTML

.container-fluid header nav ul li a {
  color: orange;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container-fluid d-flex justify-content-md-between flex-row" id="navbar-container">
  <div class="logo">
    <img id="logo" src="logo.png" alt="" height="50px;">
  </div>

  <header id="header" class="d-flex justify-content-md-center">
    <nav class="navbar navbar-expand-lg navbar-light ">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			    <span class="navbar-toggler-icon"></span>
			  </button>
      <div class="collapse navbar-collapse text-center" id="navbarNavDropdown">
        <ul class="navbar-nav  ">
          <li class="nav-item active centrado">
            <a class="nav-link " href="#">Inicio</a>
          </li>
          <li class="nav-item centrado ">
            <a class="nav-link " href="#">Sobre Nosotros</a>
          </li>
          <li class="nav-item centrado">
            <a class="nav-link" href="#">Quienes Somos</a>
          </li>
          <li class="nav-item centrado">
            <a class="nav-link" href="#">Blog</a>
          </li>
          <li class="nav-item centrado">
            <a class="nav-link" href="#">Contacto</a>
          </li>
          <li class="nav-item centrado pl-3" id="socialnav">
            <a class="nav-link" href=""><i class="fab fa-facebook-f"></i></a>
          </li>
          <li class="nav-item centrado" id="socialnav">
            <a class="nav-link" href=""><i class="fab fa-twitter"></i></a>
          </li>
          <li class="nav-item centrado" id="socialnav">
            <a class="nav-link" href=""><i class="fab fa-instagram"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </header><!-- /header -->

html css3 bootstrap

asked by Victor Escalona 18.06.2018 в 20:03

source

3 answers

Graph with Highcharts How to rename the tables created by the EF by default?

score 1 · Answer 1

I'll explain to you briefly, Boostrap already brings its predefined colors in its classes, in order to change them my recommendation is to modify those attributes specifically.
The selector you use is .navbar-light .navbar-nav .nav-link
And of course you have to put those styles after which the reference to the CSS of Boostrap is made so that it respects our modifications.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Este es para los elementos en general */
.navbar-light .navbar-nav .nav-link {
color: orange;
}
/*  Este es para el elemento activo lo puedes omitir si asi deseas */
.navbar-light .navbar-nav .active>.nav-link  {
 color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container-fluid d-flex justify-content-md-between flex-row" id="navbar-container">
  <div class="logo">
    <img id="logo" src="logo.png" alt="" height="50px;">
  </div>

  <header id="header" class="d-flex justify-content-md-center">
    <nav class="navbar navbar-expand-lg navbar-light ">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			    <span class="navbar-toggler-icon"></span>
			  </button>
      <div class="collapse navbar-collapse text-center" id="navbarNavDropdown">
        <ul class="navbar-nav  ">
          <li class="nav-item active centrado">
            <a class="nav-link " href="#">Inicio</a>
          </li>
          <li class="nav-item centrado ">
            <a class="nav-link " href="#">Sobre Nosotros</a>
          </li>
          <li class="nav-item centrado">
            <a class="nav-link" href="#">Quienes Somos</a>
          </li>
          <li class="nav-item centrado">
            <a class="nav-link" href="#">Blog</a>
          </li>
          <li class="nav-item centrado">
            <a class="nav-link" href="#">Contacto</a>
          </li>
          <li class="nav-item centrado pl-3" id="socialnav">
            <a class="nav-link" href=""><i class="fab fa-facebook-f"></i></a>
          </li>
          <li class="nav-item centrado" id="socialnav">
            <a class="nav-link" href=""><i class="fab fa-twitter"></i></a>
          </li>
          <li class="nav-item centrado" id="socialnav">
            <a class="nav-link" href=""><i class="fab fa-instagram"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- /header -->

score 0 · Answer 2

0

Remember to remove the default decoration that the label brings to the example

.ontainer-fluid header nav ul li a{
text-decoration:none;
color: orange;

}

answered by 18.06.2018 в 20:05

score 0 · Answer 3

0

Add ! important

 .container-fluid header nav ul li a{
    color: orange !important;
}

answered by 18.06.2018 в 21:48