Bootstrap 5 navbar not changing background color on scroll?

Yes, I have checked the other posts. I didn’t have this issue when building normal html/css/js project but I need bootstrap for this project and I think it is interfering somehow with my script, but I do not know how.

On scroll, I want color to change from transparent to x. I also want to change all navbar elements styling, maybe reduce size on scroll but I tried to change color first before going deeper, and that itself is not working.

Could someone help me out?

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./assets/styles/bootstrap.css" />
    <link rel="stylesheet" href="./assets/styles/index.css" />
    <link
      rel="icon"
      type="image/ico"
      href="./assets/images/favicon/favicon.ico"
    />
    <link
      rel="icon"
      type="image/png"
      href="./assets/images/favicon/favicon.png"
    />
    <title>test</title>
  </head>
  <body>
    <!--Navbar Start-->
    <nav class="navbar fixed-top navbar-expand-lg" id="nav">
      <a class="lang-btn" href="#"><span>LANG</span></a>

      <div class="container-fluid">
        <a class="navbar-brand" href="#"
          ><img
            src="./assets/images/logo_light.svg"
            alt="test logo"
            class="test-logo-light"
        />
        <!-- <img
            src="./assets/images/Logo_Dark.svg"
            alt="test logo"
            class="test-logo-dark"
        /> -->
      </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse ms-auto" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
            </li>
          </ul>
          <div class="navbar-nav ms-auto">
            <div class="settings">
              <div class="nav-contact">
                <span>Get in Touch</span>
                <a href="tel:+00000" class="digit">00000</a>
              </div>
              <div class="nav-account">
                <a href="#">
                  <img
                    src="./assets/images/MyAccount_icon_white.svg"
                    alt="my-account-icon"
                  />
                >
                <a href="#">
                  <img
                    src="./assets/images/Register_icon_white.svg"
                    alt="my-account-icon"
                  />
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <!--Navbar End-->

   
    <!-- Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script src="./scripts/bootstrap.js"></script>
    <script src="./scripts/script.js"></script>
  </body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./assets/styles/bootstrap.css" />
    <link rel="stylesheet" href="./assets/styles/index.css" />
    <link
      rel="icon"
      type="image/ico"
      href="./assets/images/favicon/favicon.ico"
    />
    <link
      rel="icon"
      type="image/png"
      href="./assets/images/favicon/favicon.png"
    />
    <title>test</title>
  </head>
  <body>
    <!--Navbar Start-->
    <nav class="navbar fixed-top navbar-expand-lg" id="nav">
      <a class="lang-btn" href="#"><span>LANG</span></a>
​
      <div class="container-fluid">
        <a class="navbar-brand" href="#"
          ><img
            src="./assets/images/logo_light.svg"
            alt="test logo"
            class="test-logo-light"
        />
        <!-- <img
            src="./assets/images/Logo_Dark.svg"
            alt="test logo"
            class="test-logo-dark"
        /> -->
      </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse ms-auto" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
            </li>
          </ul>
          <div class="navbar-nav ms-auto">
            <div class="settings">
              <div class="nav-contact">
                <span>Get in Touch</span>
                <a href="tel:+00000" class="digit">00000</a>
              </div>
              <div class="nav-account">
                <a href="#">
                  <img
                    src="./assets/images/MyAccount_icon_white.svg"
                    alt="my-account-icon"
                  />
                >
                <a href="#">
                  <img
                    src="./assets/images/Register_icon_white.svg"
                    alt="my-account-icon"
                  />
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <!--Navbar End-->
​
   
    <!-- Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script src="./scripts/bootstrap.js"></script>
    <script src="./scripts/script.js"></script>
  </body>
</html>
​

CSS

.navbar {
  flex-direction: column;
  margin: 0;
  padding: 0;
  top: 0;
  text-transform: uppercase;
  background-color: transparent !important;
}
.navbar.scrolled{
  flex-direction: column;
  margin: 0;
  padding: 0;
  top: 0;
  text-transform: uppercase;
  background-color: #38456b !important;
}

.navbar .container-fluid {
  padding: 0 4rem;
}

.navbar .container-fluid .collapse ul li {
  margin-top: 1vh;
}

.navbar-nav .nav-item .nav-link {
  display: inline-block;
  text-transform: uppercase;
  font-family: "Georama";
  font-size: 0.9rem;
  line-height: 1.5rem;
  font-weight: light;
  color: var(--white);
  margin: 0.3rem 0.3rem;
  transform: 1s ease-in-out;
}

JavaScript
 
.navbar {
  flex-direction: column;
  margin: 0;
  padding: 0;
  top: 0;
  text-transform: uppercase;
  background-color: transparent !important;
}
.navbar.scrolled{
  flex-direction: column;
  margin: 0;
  padding: 0;
  top: 0;
  text-transform: uppercase;
  background-color: #38456b !important;
}
​
.navbar .container-fluid {
  padding: 0 4rem;
}
​
.navbar .container-fluid .collapse ul li {
  margin-top: 1vh;
}
​
.navbar-nav .nav-item .nav-link {
  display: inline-block;
  text-transform: uppercase;
  font-family: "Georama";
  font-size: 0.9rem;
  line-height: 1.5rem;
  font-weight: light;
  color: var(--white);
  margin: 0.3rem 0.3rem;
  transform: 1s ease-in-out;
}
​

$(window).scroll(function(){
    $('nav').toggleClass('scrolled', $(this).scrollTop()> 50)
})

JavaScript
 
$(window).scroll(function(){
    $('nav').toggleClass('scrolled', $(this).scrollTop()> 50)
})
​

Answer

Omg so stupid of me! Nobody pointed it out but I forgot to add script for jquery, thats all!

Put it in the head

Advertisement

Answer