Notice, you have a little mistake, you declared id and wrote #mainNavbar, just delete that #
id=”mainNavbar”
Solution 1 :
Solution 2 :
Remove hash from nav id.
Check the image here.
https://prnt.sc/V-NkibDZCUYi
Problem :
My navbar doesn’t seem to be changing color when scrolled. There’s a bit of js I’m trying to implement (at the bottom of the following code block), but it doesn’t seem to render and I have no idea why. I’ve made sure the bootstrap cdn is up-to-date. I’ve made sure my class references are accurate. Nothing seems to work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,800;1,300&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<title> Museum of Candy </title>
</head>
<body>
<nav id="#mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 ps-2 fixed-top">
<a href="#" class="navbar-brand">CANDY</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">TICKETS</a>
</li>
</ul>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div id="headingGroup" class="text-white text-center d-none d-lg-block">
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
<h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="hand2.png" alt="">
</div>
</div>
</section>
<section class="container-fluid px-0 content">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<img class="img-fluid" src="milk.png" alt="">
</div>
<div class="col-md-6 text-center order-1">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h2>MUSEUM OF CANDY</h2>
<img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae...</p>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid px-0 content">
<div class="row align-items-center">
<div class="col-md-6 text-center">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h2>MUSEUM OF CANDY</h2>
<img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae... </p>
</div>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid" src="gumball.png" alt="">
</div>
</div>
</section>
<section class="container-fluid px-0 content">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<img class="img-fluid" src="sprinkles.png" alt="">
</div>
<div class="col-md-6 text-center order-1">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h2>MUSEUM OF CANDY</h2>
<img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, ist...</p>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- This is the JS section that's not working: -->
<script>
$(function () {
$(document).scroll(function () {
var $nav = $("#mainNavbar");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
</body>
</html>
And, for what it’s worth, here is my css:
.navbar.scrolled {
background: rgb(222,192,222);
transition: background 500ms;
}
I want the navbar background color to change when I scroll, but that doesn’t seem to be happening.
Comments
Comment posted by Carsten Løvbo Andersen
Might be because you have written
Comment posted by Anthony Karambelas
Thanks, Carsten! That did the trick. Appreciate the help.