Home > Software design >  Change Nav-link color in bootstrap 5
Change Nav-link color in bootstrap 5

Time：03-30

I am trying to change the color of the text in my Navbar links. I have tried solutions from around 30 different people but nothing seems to work. All of the ones that have changed the colour have also removed the hover function and changed the style of the text. I am trying to make my NavBar links look like in the website below (white and red on hover)

https://www.alleplanspizzeria.se/


var nav = document.querySelector('nav');

window.addEventListener('scroll', function() {
  if (window.pageYOffset > 50) {
    nav.classList.add('bg-dark', 'shadow');
  } else {
    nav.classList.remove('bg-dark', 'shadow');
  }
});
.banner-image {
  background-image: url("imgheader1.jpg");
  background-size: cover;
}

.nav-link {
  font-size: 3vh;
  font-weight: 400;
}

#logoname {
  margin-left: 1vh;
  font-size: x-large;
  font-weight: 600;
}


/* .nav-link {
color: white;
} 
.nav-link:hover {
  color: red;
} */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap 5 - Transparent Navbar</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">

</head>

<body>
  <!-- Navbar  -->
  <nav >
    <div >
      <p  id="logoname">Korvens Pizzeria</p>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>

      <div  id="navbarNav">
        <div ></div>
        <ul >
          <li >
            <a href="#Hem" >Hem</a>
          </li>
          <li >
            <a href="#Meny" >Meny</a>
          </li>
          <li >
            <a href="#Kontakt" >Kontakt</a>
          </li>
          <li >
            <a href="#Om oss" >Om oss</a>
          </li>
        </ul>
      </div>
    </div>
    </div>
  </nav>


  <!-- Banner Image  -->
  <div >
    <div >
      <div >
        <div  id="inforuta">
          <div>
            <h1>Korvens <span >Pizzeria</span></h1>
            <p >
              Korvvägen <br> öpptetiders
            </p>
            <button >MENY</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content Area -->
  <div >
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi. df
      </p>
    </div>
  </div>
  <script src="js/bootstrap.bundle.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

The issue is with CSS Specificity.

You can increase that by including the parent of .nav-link in your css selector, which is .nav-item

var nav = document.querySelector('nav');

window.addEventListener('scroll', function() {
  if (window.pageYOffset > 50) {
    nav.classList.add('bg-dark', 'shadow');
  } else {
    nav.classList.remove('bg-dark', 'shadow');
  }
});
.banner-image {
  background-image: url("imgheader1.jpg");
  background-size: cover;
}

.nav-link {
  font-size: 3vh;
  font-weight: 400;
}

.navbar-dark .navbar-nav .nav-item .nav-link { 
  /* The styles are more specific now, than the default Bootstrap selector*/
  color: white;
}

.navbar-dark .navbar-nav .nav-item .nav-link:hover {
  color: red;
}

#logoname {
  margin-left: 1vh;
  font-size: x-large;
  font-weight: 600;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">

<!-- Navbar  -->
<nav >
  <div >
    <p  id="logoname">Korvens Pizzeria</p>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>

    <div  id="navbarNav">
      <div ></div>
      <ul >
        <li >
          <a href="#Hem" >Hem</a>
        </li>
        <li >
          <a href="#Meny" >Meny</a>
        </li>
        <li >
          <a href="#Kontakt" >Kontakt</a>
        </li>
        <li >
          <a href="#Om oss" >Om oss</a>
        </li>
      </ul>
    </div>
  </div>
  </div>
</nav>


<!-- Banner Image  -->
<div >
  <div >
    <div >
      <div  id="inforuta">
        <div>
          <h1>Korvens <span >Pizzeria</span></h1>
          <p >
            Korvvägen <br> öpptetiders
          </p>
          <button >MENY</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Main Content Area -->
<div >
  <div >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
    </p>
  </div>
  <div >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
    </p>
  </div>
  <div >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
    </p>
  </div>
  <div >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
    </p>
  </div>
  <div >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi. df
    </p>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

var nav = document.querySelector('nav');

window.addEventListener('scroll', function() {
  if (window.pageYOffset > 50) {
    nav.classList.add('bg-dark', 'shadow');
  } else {
    nav.classList.remove('bg-dark', 'shadow');
  }
});
.banner-image {
  background-image: url("imgheader1.jpg");
  background-size: cover;
}

.nav-link {
  font-size: 3vh;
  font-weight: 400;
}

#logoname {
  margin-left: 1vh;
  font-size: x-large;
  font-weight: 600;
}

.nav-link {
  color: white !important;
}

.nav-link:hover {
  color: red !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap 5 - Transparent Navbar</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
  <script src="js/bootstrap.bundle.min.js" async></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous" async></script>

</head>

<body>
  <!-- Navbar  -->
  <nav >
    <div >
      <p  id="logoname">Korvens Pizzeria</p>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>

      <div  id="navbarNav">
        <div ></div>
        <ul >
          <li >
            <a href="#Hem" >Hem</a>
          </li>
          <li >
            <a href="#Meny" >Meny</a>
          </li>
          <li >
            <a href="#Kontakt" >Kontakt</a>
          </li>
          <li >
            <a href="#Om oss" >Om oss</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <!-- Banner Image  -->
  <div >
    <div >
      <div >
        <div  id="inforuta">
          <div>
            <h1>Korvens <span >Pizzeria</span></h1>
            <p >
              Korvvägen <br> öpptetiders
            </p>
            <button >MENY</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content Area -->
  <div >
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores natus iusto fugit id saepe neque rerum magni laudantium accusantium dolorem numquam quasi. df
      </p>
    </div>
  </div>

</body>

</html>

I guess by default bootstrap styles are marked important and to override them you need to use !important.

Hope this helps.

Page link：https//www.codepudding.com/Softwaredesign/353973.html

Prev:Hi i am having a problem in java script with function and arrays
Next:Issue in ReactJs function calling between components
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding