• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Navbar active links not working

New Here ,
Mar 30, 2024 Mar 30, 2024

Copy link to clipboard

Copied

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>

TOPICS
Bootstrap

Views

300

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 30, 2024 Mar 30, 2024

Copy link to clipboard

Copied

LATEST

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines