I want it to make that when I press the navbar-item that corresponds to the sectionX or when I scroll into that section, some kind of highlight on the navbar shows me that I'm on that section.
I've tried adding some css properties and using Bootstrap but can't seem to get it working.
Much thanks in advance.
This is my Code:
$(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
});
});html {
scroll-behavior: smooth;
}
body {
position: relative;
}
.vertical-nav {
min-width: 19rem;
width: 19rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.page-content {
width: calc(100% - 19rem);
margin-left: 19rem;
transition: all 0.4s;
}
#sidebar.active {
margin-left: -19em;
}
#content.active {
width: 100%;
margin: 0;
}
@media (max-width: 768px) {
#sidebar {
margin-left: -19em;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
margin: 0;
}
#content.active {
margin-left: 19em;
width: calc(100% - 19em);
}
}
.bg-nav {
background-color: #15202b;
}
.bg-page {
background-color: dark-grey;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="assets/favicon.png">
<title>Portfolio</title>
</head>
<body data-spy="scroll" data-target=".vertical-nav" data-offset="50" class="custom-scrollbar-js">
<div class="vertical-nav bg-nav" id="sidebar">
<div class="py-4 px-3 bg-nav" style="margin-top: 50%;">
<div class="text-center">
<img src="assets/profile.png" width="150" height="150" class="rounded-circle">
</div>
</div>
<ul class="nav flex-column bg-nav">
<li class="nav-item">
<a href="#section1" class="nav-link text-light text-uppercase h5 text-center">About</a>
</li>
<li class="nav-item">
<a href="#section2" class="nav-link text-light text-uppercase h5 text-center">Education</a>
</li>
<li class="nav-item">
<a href="#section3" class="nav-link text-light text-uppercase h5 text-center">Skills</a>
</li>
</ul>
</div>
<div class="page-content p-4 bg-page bg-dark" id="content" style="height: 100%;">
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class="btn btn-dark bg-nav rounded-pill shadow-sm px-4 mb-4 position-fixed">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
<!-- Page content -->
<div id="section1" class="container-fluid" style="padding-top:70px; padding-bottom:70px">
<h1 class="text-light">1</h1>
<h3 class="text-white">Hello, World</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
</div>
<div id="section2" class="container-fluid" style="padding-top:70px;padding-bottom:70px">
<h1 class="text-light">2</h1>
<h3 class="text-white">Hello, World</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
</div>
<div id="section3" class="container-fluid" style="padding-top:70px;padding-bottom:70px">
<h1 class="text-light">3</h1>
<h3 class="text-white">Hello, World</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
<h3 class="text-white">This is my website, have fun!</h3>
</div>
<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>