Navbar active links not working

[andrews24652894]

Hello,

I'm hoping someone can help figure this out.  I'll post below the HTML and CSS that is setup but my active links do not show as the set active color just the normal color, the hover works fine, the correct color shows when hovering on any link and on any page.

I copied this from one page, but every page are accurately (I believe) marked as active.

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="tips.html">Tips</a></li>
<li class="nav-item active"> <a class="nav-link" href="request service.html">Request Service<span class="sr-only">(current)</span></a></li>
<li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>

Here is the CSS, it was added using Page>Properties, then I copied the code to each page.

<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FF3000;
}
a:active {
text-decoration: none;
color: rgba(255,48,0,1);
}
</style>

[Nancy OShea]

Not too sure what you're expecting but Active is not a YOU ARE HERE breadcrumb.  Active is the state on MouseClick. When mouse is released, the active link reverts to its non-active state.

If you're wanting a YOU ARE HERE breadcrumb, see Bootstrap Scrollspy.  Scrollspy uses JavaScript to detect where the user is on the page and which navigation element should be highlighted.

https://getbootstrap.com/docs/4.0/components/scrollspy/

Hope that helps.