Bootstrap 4 navbar active class not working

Question

In a website, I am trying to get this specific navbar active class to work. When I click on the current page, I would like the link to turn blue. Since I am a beginner, any help would be really appreciated. Thanks in advance.

Here is the navbar :

<div class="nav-scroller py-1 mb-2">

   <nav class="nav d-flex justify-content-between">


      <a class="active p-2 text-muted" href="#"><b> Business</b> </a>
      <a class="p-2 text-muted" href="#"><b> Design </b></a>
      <a class="p-2 text-muted" href="#"><b>Travel </b></a>
      <a class="p-2 text-muted" href="#"><b> Opinion </b></a>

   </nav>

</div>

Here is the javascript code:

$('.nav .p-2 .text-muted').click(function(){
$('.nav .p-2 .text-muted').removeClass('active');
$(this).addClass('active');
})

I also used CSS to turn the current navbar page link to blue:

.nav  > .p-2.activate  {
color:blue;
}

In your CSS you called the class `activate` and in your HTML and jQuery you called it `active` — abney317, Feb 07 '19 at 04:20

Saurabh Mistry · Accepted Answer · 2019-02-07T05:07:40.323

Here is the working demo :

$(document).ready(function(){
 $('nav a').click(function(){
   $('nav a').removeClass('active');
   $(this).addClass('active');
   let link=$(this).attr('href');
   window.location.href=link;
 });
});

.nav >a.active>b{
  color:blue;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    
    
    <div class="nav-scroller py-1 mb-2">

   <nav class="nav d-flex justify-content-between">


      <a class="active p-2 text-muted" href="https://fonts.google.com"><b> Business</b> </a>
      <a class="p-2 text-muted" href="https://facebook.com"><b> Design </b></a>
      <a class="p-2 text-muted" href="google.com"><b>Travel </b></a>
      <a class="p-2 text-muted" href="#"><b> Opinion </b></a>

   </nav>

</div>

  </body>
</html>

you need to send section="yourpagename" from server side to frontend side ,

now you can show active link 2 ways :

1) first one is do ternary condition and add class in a tag

something like this way :

<a class="p-2 text-muted <% section=="Business"?'active':'' %>" href="#"><b> Business</b> </a>

2) second way is add active class using jQuery

 <a id="Business" class="p-2 text-muted" href="#"><b> Business</b> </a>

$(document).ready(function(){
    var section= "Business" . <--send value from server side same as link id
    $('#'+section).addClass('active');
});

Thanks for this demo but it is working when I let the link empty (href = "#") what do you think could be the problem? — Claude Vernet Michel, Feb 07 '19 at 04:41
@ClaudeVernetMichel , which backend you are using ? php or nodejs ? — Saurabh Mistry, Feb 07 '19 at 04:51
Sorry for asking so many questions, I am really new in web design and development. Do you know how to send section="yourpagename" in Django? Any link would be helpful. — Claude Vernet Michel, Feb 07 '19 at 05:23
https://stackoverflow.com/questions/29153593/passing-variable-from-django-template-to-view — Saurabh Mistry, Feb 07 '19 at 05:27
https://stackoverflow.com/questions/32690356/how-to-pass-variable-in-link-to-the-django-view — Saurabh Mistry, Feb 07 '19 at 05:27
It is working, thank you so much! I changed my views.py and I aslo changed the a tag to get the url. Thanks again :) — Claude Vernet Michel, Feb 07 '19 at 06:11

Nayeem Azad · Answer 2 · 2019-02-07T04:49:44.307

0

In your JQuery you added class named active ,but indise css you have class activated . Change it to active

.nav > .p-2.active { color:blue; }

edited Feb 07 '19 at 04:49

answered Feb 07 '19 at 04:21

Nayeem Azad

657
5
20

score 0 · Answer 3 · answered Feb 07 '19 at 04:21

0

First of all you are making mistake to choose selector, add this

$('.nav .p-2.text-muted').click(function(){
  $('.nav .p-2.text-muted').removeClass('active');
  $(this).addClass('active');
})

and css also

.nav  > .p-2.active  {
color:blue;
}

answered Feb 07 '19 at 04:21

Hiren Vaghasiya

5,454
1
11
25

Bootstrap 4 navbar active class not working

3 Answers3