The navigation underline stays in place even after being clicked, and also appears below

Question

The navigation underline stays in place even after being clicked, and also appears below

I've managed to create the underline effect on the navigation links when the user hovers over them.

However, the underline only stays visible until the user clicks elsewhere on the screen. How can I make it persist as long as the user is on the page?

Additionally, there is a button in the left-side navigation that acts as a link to the home page. Despite my efforts, the underline feature does not work on this button. Any suggestions on how to fix this?

.navbar-brand img {
  height:33px;
  width: auto;
}

.navbar {
  line-height: 33px;
}

button {
    background-color:rgb(255, 102, 0);;
}
.navbar-dark .navbar-nav > li > a {
    border-bottom: 1px solid transparent;
}

.navbar-dark .navbar-nav > li > a:hover, .navbar-dark .navbar-nav > li > a:focus, .navbar-dark .navbar-nav > .active > a, .navbar-dark .navbar-nav > .active > a:hover, .navbar-dark .navbar-nav > .active > a:focus {
    color: rgb(255, 102, 0);;
    border-bottom: 1px solid rgb(255, 102, 0);
}

.navbar-dark .navbar-nav > button.home:hover, .navbar-dark .navbar-nav >  button.home:focus, .navbar-dark .navbar-nav > .active > button.home, .navbar-dark .navbar-nav > .active > a:hover, .navbar-dark .navbar-nav > .active > a:focus {
    color: rgb(255, 102, 0);
    border-bottom: 1px solid rgb(255, 102, 0);
}

HTML

<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/" routerLinkActive="active">
    <img src="https://via.placeholder.com/200x30" alt="" />
  </a>
  <button class="navbar-toggler home" (click)="isCollapsed = !isCollapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault" [collapse]="isCollapsed">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/services" routerLinkActive="active">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/case-studies" routerLinkActive="active">Testimonials</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/blog" routerLinkActive="active">Blog</a>
      </li>
    </ul>
    <div class="form-inline my-2 my-lg-0">
       <a class="nav-link button" routerLink="/intouch" routerLinkActive="active"><button class="btn btn-outline-primary my-2 my-sm-0">Contact</button></a>
    </div>
  </div>
</nav>

javascript html css twitter-bootstrap angular

Answer 1

Answer №1

If you desire the hover effect to remain active even after clicking on the link, you can achieve this by using jQuery (native JS is also an option, but since Bootstrap relies on jQuery, we will stick with it) to attach click event listeners to:

the <a> element in your navigation bar to add a class called active to the link and prevent the click event from bubbling up to the document
the document object within your DOM structure to remove the active class from all navigation links

Your JavaScript logic should be similar to:

$('.navbar-nav a').click(function(e) {
    e.stopPropagation();
    $(this).addClass('active');
});

$(document).click(function() {
    $('.navbar-nav a').removeClass('active');
});

If you want only one element to maintain the active state at a time, you need to adjust the first click event handler to remove the class from other anchor elements, like so:

$('.navbar-nav a').click(function(e) {
    e.stopPropagation();
    $('.navbar-nav a').removeClass('active');
    $(this).addClass('active');
});

To enhance this, simply include a new selector a.active in your CSS list:

.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li > a:focus,
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus,
.navbar-dark .navbar-nav > li > a.active {
    color: rgb(255, 102, 0);;
    border-bottom: 1px solid rgb(255, 102, 0);
}

Check out the proof-of-concept example below:

$(function() {
  $('.navbar-nav a').click(function(e) {
    e.stopPropagation();
    $('.navbar-nav a').removeClass('active');
    $(this).addClass('active');
  });

  $(document).click(function() {
    $('.navbar-nav a').removeClass('active');
  });

});

.navbar-brand img {
  height: 33px;
  width: auto;
}

.navbar {
  line-height: 33px;
}

.footer {
  padding: 25px;
}

button {
  background-color: rgb(255, 102, 0);
  ;
}

.navbar-dark .navbar-nav>li>a {
  border-bottom: 1px solid transparent;
}

.navbar-dark .navbar-nav>li>a:hover,
.navbar-dark .navbar-nav>li>a:focus,
.navbar-dark .navbar-nav>.active>a,
.navbar-dark .navbar-nav>.active>a:hover,
.navbar-dark .navbar-nav>.active>a:focus,
.navbar-dark .navbar-nav>li>a.active {
  color: rgb(255, 102, 0);
  ;
  border-bottom: 1px solid rgb(255, 102, 0);
}

.navbar-dark .navbar-nav>button.home:hover,
.navbar-dark .navbar-nav>button.home:focus,
.navbar-dark .navbar-nav>.active>button.home,
.navbar-dark .navbar-nav>.active>a:hover,
.navbar-dark .navbar-nav>.active>a:focus {
  color: rgb(255, 102, 0);
  border-bottom: 1px solid rgb(255, 102, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/" routerLinkActive="active">
    <img class="vp-image" src="http://via.placeholder.com/200x30" alt="Dev" />
  </a>
  <button class="navbar-toggler home" (click)="isCollapsed = !isCollapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault" [collapse]="isCollapsed">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/services" routerLinkActive="active">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/case-studies" routerLinkActive="active">Case Studies</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/blog" routerLinkActive="active">Blog</a>
      </li>
    </ul>
    <div class="form-inline my-2 my-lg-0">
      <a class="nav-link button" routerLink="/intouch" routerLinkActive="active"><button class="btn btn-outline-primary my-2 my-sm-0">Contact</button></a>
    </div>
  </div>
</nav>

Answer 2

If you desire the hover effect to remain active even after clicking on the link, you can achieve this by using jQuery (native JS is also an option, but since Bootstrap relies on jQuery, we will stick with it) to attach click event listeners to:

the <a> element in your navigation bar to add a class called active to the link and prevent the click event from bubbling up to the document
the document object within your DOM structure to remove the active class from all navigation links

Your JavaScript logic should be similar to:

$('.navbar-nav a').click(function(e) {
    e.stopPropagation();
    $(this).addClass('active');
});

$(document).click(function() {
    $('.navbar-nav a').removeClass('active');
});

If you want only one element to maintain the active state at a time, you need to adjust the first click event handler to remove the class from other anchor elements, like so:

$('.navbar-nav a').click(function(e) {
    e.stopPropagation();
    $('.navbar-nav a').removeClass('active');
    $(this).addClass('active');
});

To enhance this, simply include a new selector a.active in your CSS list:

.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li > a:focus,
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus,
.navbar-dark .navbar-nav > li > a.active {
    color: rgb(255, 102, 0);;
    border-bottom: 1px solid rgb(255, 102, 0);
}

Check out the proof-of-concept example below:

$(function() {
  $('.navbar-nav a').click(function(e) {
    e.stopPropagation();
    $('.navbar-nav a').removeClass('active');
    $(this).addClass('active');
  });

  $(document).click(function() {
    $('.navbar-nav a').removeClass('active');
  });

});

.navbar-brand img {
  height: 33px;
  width: auto;
}

.navbar {
  line-height: 33px;
}

.footer {
  padding: 25px;
}

button {
  background-color: rgb(255, 102, 0);
  ;
}

.navbar-dark .navbar-nav>li>a {
  border-bottom: 1px solid transparent;
}

.navbar-dark .navbar-nav>li>a:hover,
.navbar-dark .navbar-nav>li>a:focus,
.navbar-dark .navbar-nav>.active>a,
.navbar-dark .navbar-nav>.active>a:hover,
.navbar-dark .navbar-nav>.active>a:focus,
.navbar-dark .navbar-nav>li>a.active {
  color: rgb(255, 102, 0);
  ;
  border-bottom: 1px solid rgb(255, 102, 0);
}

.navbar-dark .navbar-nav>button.home:hover,
.navbar-dark .navbar-nav>button.home:focus,
.navbar-dark .navbar-nav>.active>button.home,
.navbar-dark .navbar-nav>.active>a:hover,
.navbar-dark .navbar-nav>.active>a:focus {
  color: rgb(255, 102, 0);
  border-bottom: 1px solid rgb(255, 102, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/" routerLinkActive="active">
    <img class="vp-image" src="http://via.placeholder.com/200x30" alt="Dev" />
  </a>
  <button class="navbar-toggler home" (click)="isCollapsed = !isCollapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault" [collapse]="isCollapsed">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/services" routerLinkActive="active">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/case-studies" routerLinkActive="active">Case Studies</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/blog" routerLinkActive="active">Blog</a>
      </li>
    </ul>
    <div class="form-inline my-2 my-lg-0">
      <a class="nav-link button" routerLink="/intouch" routerLinkActive="active"><button class="btn btn-outline-primary my-2 my-sm-0">Contact</button></a>
    </div>
  </div>
</nav>

The navigation underline stays in place even after being clicked, and also appears below

Answer №1

Similar questions

Adjusting the desktop view through media queries for mobile devices

Mastering the art of integrating two applications in Django involves understanding how to properly

The Next.js client-side JavaScript application experiences unforeseen disruptions without generating any console errors

Transition delays in Tailwind CSS when dark mode is activated

FirebaseError encountered: Unable to update document due to absence of document. Updating document is only possible if document id is hard coded

In need of secure HTML, received a dose of Style instead

Is there a way to prevent a span from appearing at the end of a line?

Error encountered when trying to update tree structure in TypeScript with new data due to incorrect array length validation

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Can you explain the process that takes place when require("http").Server() is called with an Express application passed in as a parameter?

Utilize React Dropzone for effortlessly styling elements upon drop action

What is the best way to allow all authenticated routes to display the Devise ajax Login form?

The duplication and multiplication of margin-left is occurring

The command "bin" is not identified as an internal or external command in this npm script

You need a function property for the child component to be updated

Issue with scrolling to the bottom of collapsed sections in Bootstrap

The XPath for the element that comes before a specific text

How to show a button within a table cell using AngularJS?

Encountering the error "Unable to access the 'pickAlgorithm' property of null" in a ReactJS context

Troubleshooting JSONP Implementation with JQuery: Scope versus Async Problems