Menu item active for master header page - html

Question

I have sticky left nav bar, I would like to active nav as per page, I did class active for related page nav items but now I moved to header single one master page now I added active class in any nav item the only one active nav shows whatever page I am is on. I need active item as per page nav, please help.
.navbar {
position: fixed;
background-color: #C8E8E9;
transition: width 600ms ease;
overflow: hidden;
z-index:9;
border-radius:0px!important;
top: 0;
height: 100vh;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: max-content;
font-family: 'Open Sans';
}
.nav-item {
width: 100%;
}
.nav-item a {
}
.nav-item .active {
background-color: #ffc20e!important;
}
.nav-item:last-child {
margin-top: auto;
}
.active-nav{
background-color:#FFDB72;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: #000000;
text-decoration: none;
/*filter: grayscale(100%) opacity(0.7);*/
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: #FFDB72;
color: #000000;
}
.link-text {
display: none;
margin-left: 0rem;
padding-left: 21px;
font-size: 13px;
font-weight: 600;
margin-right:50px;
}
.nav-link-arrow{
width: 2rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.nav-link-icon{
width: 0rem;
min-width:0rem;
margin: 0 1.5rem;
}
.nav-link svg {
width: 1rem;
min-width: 1rem;
margin: 0 1.5rem;
}
.fa-primary {
color: #ff7eee;
}
.fa-secondary {
color: #df49a6;
}
.fa-primary,
.fa-secondary {
transition: var(--transition-speed);
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
font-size:16px;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Menu</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-university nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-book nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 2</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-user nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 3</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-picture-o nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 4</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pl-25">
<img src="images/image.png">
<span class="link-text">Nav 5</span>
</a>
</li>
</ul>
</nav>

Answer 1

Here i don't understand your question but here i understand a little bit what you want is nav active when clicked on one page, sorry if i misunderstood
Here I try my best to help and hope it helps
Here I added Jquery, you can try it
$(function(){
$('.navbar-nav a').on("click",function(){
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
})
.navbar {
position: fixed;
background-color: #C8E8E9;
transition: width 600ms ease;
overflow: hidden;
z-index:9;
border-radius:0px!important;
top: 0;
height: 100vh;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: max-content;
font-family: 'Open Sans';
}
.nav-item {
width: 100%;
}
.nav-item a {
}
.nav-item .active {
background-color: #ffc20e!important;
}
.nav-item:last-child {
margin-top: auto;
}
.active-nav{
background-color:#FFDB72;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: #000000;
text-decoration: none;
/*filter: grayscale(100%) opacity(0.7);*/
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: #FFDB72;
color: #000000;
}
.link-text {
display: none;
margin-left: 0rem;
padding-left: 21px;
font-size: 13px;
font-weight: 600;
margin-right:50px;
}
.nav-link-arrow{
width: 2rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.nav-link-icon{
width: 0rem;
min-width:0rem;
margin: 0 1.5rem;
}
.nav-link svg {
width: 1rem;
min-width: 1rem;
margin: 0 1.5rem;
}
.fa-primary {
color: #ff7eee;
}
.fa-secondary {
color: #df49a6;
}
.fa-primary,
.fa-secondary {
transition: var(--transition-speed);
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
font-size:16px;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Menu</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="fa fa-university nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text ">Nav 1</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-book nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 2</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-user nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 3</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-picture-o nav-link-icon fa-lg" aria-hidden="true"></i>
<span class="link-text">Nav 4</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pl-25">
<img src="images/image.png">
<span class="link-text">Nav 5</span>
</a>
</li>
</ul>
</nav>