Home > Net >  Bootstrap 5 navbar not changing background color on scroll?
Bootstrap 5 navbar not changing background color on scroll?

Time:09-07

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  id="nav">
      <a  href="#"><span>LANG</span></a>

      <div >
        <a  href="#"
          ><img
            src="./assets/images/logo_light.svg"
            alt="test logo"
            
        />
        <!-- <img
            src="./assets/images/Logo_Dark.svg"
            alt="test logo"
            
        /> -->
      </a>
        <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">
          <ul >
            <li >
              <a  aria-current="page" href="#">Home</a>
            </li>
            <li >
              <a  href="#">About Us</a>
            </li>
          </ul>
          <div >
            <div >
              <div >
                <span>Get in Touch</span>
                <a href="tel: 00000" >00000</a>
              </div>
              <div >
                <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/[email protected]/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;
}

JS

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

CodePudding user response:

Try as This example:

    <!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="" />
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <title>test</title>
    </head>
    <style>
        nav {
            text-align: center;
            position: fixed !important;
            top: 0;
            width: 100%;
            z-index: 100;
            opacity: 40%; /* change the transparent color derees here */
            }
    </style>
    <body>
        <nav  style="background-color: rgb(100, 142, 142);" id="myNAV">
            <div >
                <a  href="#">Navbar</a>
            </div>
        </nav>
        <div ></div>
        <div ></div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, hic non dignissimos placeat explicabo at? Repellat assumenda et dolores ad quos voluptate recusandae doloribus voluptas earum nisi, saepe est iusto.</p>
    </body>
    <script>
        document.addEventListener("scroll", myFunction);
        function myFunction() {
            if (document.documentElement.scrollTop == 0){
                // change the transparent color derees here 
                document.getElementById("myNAV").style.opacity = "40%";
            }else{
                document.getElementById("myNAV").style.opacity = "100%";
            }
        }
    </script>
    </html>

CodePudding user response:

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

Put it in the head

  • Related