little stumped here when trying to make my new website. I decided I wanted to add a scrollspy using Bootstrap so it looks for lively. I tried it but nothing seems to be happening to the navigation bar when I scroll the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<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=Montserrat:wght@650&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
* {
font-family: 'Montserrat', sans-serif;
color: white;
position: relative;
}
body {
background: #313131
}
.cover {
background: url(bg.svg) no-repeat center center fixed;
background-color: #313131;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
/* margin: 0; */
/* position: absolute; */
/* top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%); */
padding-left: 2.5vw;
height: 100%;
width: 100%;
}
.mainnavbar {
background: #313131b6
}
@media screen {
.center-if-small {
text-align: left;
}
.header {
font-size: xx-large;
max-width: 700px;
margin-top: 40vh;
}
.footer {
font-size: small;
margin-bottom: 40vh;
}
}
@media screen and (max-width: 768px) {
.center-if-small {
text-align: center;
padding-left: 5vw;
padding-right: 5vw;
}
.header {
font-size: x-large;
}
.footer {
font-size: x-small;
}
}
@media screen and (max-width: 1160px) {
.cover {
background: #313131
}
}
</style>
</head>
<body>
<nav class="nav nav-pills nav-justified d-flex justify-content-center py-3 px-3 fixed-top mainnavbar" id="navbar">
<li class="nav-item"><a href="#welcome" class="nav-link active" aria-current="page">Welcome</a></li>
<li class="nav-item"><a href="#features" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#pricing" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="#faqs" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#servers" class="nav-link">Servers</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
</nav>
<div class="cover d-flex aligns-items-center">
<div class="center-if-small" id="welcome">
<h1 class="header align-middle">Hello!</h1>
<p class="footer align-middle">Welcome to my new website!</p>
</div>
</div>
<div class="container" id="sspy" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true">
<hr>
<h2 class="text-center" id="features">Features</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
<hr>
<h2 class="text-center" id="pricing">Pricing</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
<hr>
<h2 class="text-center" id="faqs">FAQs</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
<hr>
<h2 class="text-center" id="servers">Servers</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
<hr>
<h2 class="text-center" id="about">About</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
// $('#sspy').on('activate.bs.scrollspy')
$('#sspy').scrollspy();
});
</script>
</body>
</html>
I’ve tried several stuff to fix it, but nothing is happening. Really need help, thanks!
>Solution :
You have missed to add the js file of bootstrap, Add the below file in your code beside jquery.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
For more please check : https://jsfiddle.net/ponsiva/j80t5c39/1/