Change Active link on secondary menu - Not .header-nav

I have a small set of related pages that have their own secondary navigation to link them along the bottom of the header banner.

The links work fine, and the hover effect works, but I am unable to get the link text buttons to style differently if it is the active page. 

html

<div id="second-nav">
    <div><h3><a href="/team-officers">Officers</a></h3></div>
    <div><h3><a href="/team-board">Board</a></h3></div>
    <div><h3><a href="/team-fellows">Fellows</a></h3></div>
    <div></div> <! extra div needed to correct centering of the last item >
</div>

CSS

/*
 ** Secondary NAV **
*/
#second-nav > div{
  padding-right: 20px

#second-nav {
  postion: absolute;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-end;
}
#second-nav h3{
  background-color:#8EA98B;
  top: 0px;
  padding: 0px 4px 4px 12px;
  width:100%;
  z-index:1000 !important;
  box-shadow: 4px 4px 7px rgba(0,0,0,0.4)
}
#second-nav h3 a{
  color:white !important;
  font-size:15px;
}
#second-nav a:hover{
  color:white !important;
  opacity:0.6;
}

I have tried many variations of this unsuccessfully

#second-nav active a{
   color:#3d4635 !important;
}

Thank you.

url: https://www.conservenassau.org/team-officers    password: see2theSea@dawn

On 1/21/2023 at 10:57 AM, LPearlstine said:

I have a small set of related pages that have their own secondary navigation to link them along the bottom of the header banner.

The links work fine, and the hover effect works, but I am unable to get the link text buttons to style differently if it is the active page. 

html

<div id="second-nav">
    <div><h3><a href="/team-officers">Officers</a></h3></div>
    <div><h3><a href="/team-board">Board</a></h3></div>
    <div><h3><a href="/team-fellows">Fellows</a></h3></div>
    <div></div> <! extra div needed to correct centering of the last item >
</div>

CSS

/*
 ** Secondary NAV **
*/
#second-nav > div{
  padding-right: 20px

#second-nav {
  postion: absolute;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-end;
}
#second-nav h3{
  background-color:#8EA98B;
  top: 0px;
  padding: 0px 4px 4px 12px;
  width:100%;
  z-index:1000 !important;
  box-shadow: 4px 4px 7px rgba(0,0,0,0.4)
}
#second-nav h3 a{
  color:white !important;
  font-size:15px;
}
#second-nav a:hover{
  color:white !important;
  opacity:0.6;
}

I have tried many variations of this unsuccessfully

#second-nav active a{
   color:#3d4635 !important;
}

Thank you.

url: https://www.conservenassau.org/team-officers    password: see2theSea@dawn

 

Do you mean that it will show different style for this second nav which is based on the page you are in?

It may require js to identify which page we are in so we need at least the business plan or above. Is it possible for you?

Yes, I'd like it to identify the page it's on and yes we have the business plan. I'm surprised I can't just id the link in CSS as active. Thanks for having a look!