Menu item active for master header page-CodePudding

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>

CodePudding user response：

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>