How do I make Bootstrap navbar change active state?

Question

I'm new to HTML and JavaScript and right now I'm faced with a problem that I assume many of you have been dealing with yourself.

I have a nav-bar that doesn't by default changes the active-state when I click on a different page-reference.

The 'Home' nav-item is by default active, and I want to change the active state when I click on other nav-items. But I don't know how to do it? As far is I understand this isn't too many lines of code, but I'd love to get some assistance here.

Here's my code:

<head>
    <meta charset="UTF-8">
    <title>MaU Movie database</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="mumdblogo.png">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="index.html" id="movielogo"><img src="moviefylogo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor02">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="library.html">Library</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="uploads.html">Uploads</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h3 class="text-center">Search Movie!</h3>
            <form id="searchForm">
                <input type="text" class="form-control" id="searchText" placeholder="Search for any movie...">
            </form>
        </div>
    </div>

    <div class="container">
        <div id="movies" class="row">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="main.js"></script>

</body>
</html>

You could remove the default active class, then using Javascript apply the active class based on the current page URL. — Craig van Tonder, Mar 28 '18 at 09:21
https://stackoverflow.com/questions/15082316/how-to-set-active-class-to-nav-menu-from-twitter-bootstrap check this link where you find the solution for your question. — Arunachalam E, Mar 28 '18 at 09:26
this will help you, https://stackoverflow.com/questions/9301507/bootstrap-css-active-navigation — Akshath Kumar, Mar 28 '18 at 09:31

SlaWitDev · Accepted Answer · 2018-03-28T10:12:33.527

You can do this one an the end of your code. Just below <script src="main.js"></script>

<script>
$(document).ready(function() {
    $( ".mr-auto .nav-item" ).bind( "click", function(event) {
        event.preventDefault();
        var clickedItem = $( this );
        $( ".mr-auto .nav-item" ).each( function() {
            $( this ).removeClass( "active" );
        });
        clickedItem.addClass( "active" );
    });
});
</script>

And them instead of follow by link (event.preventDefault()) eg. about.html OR uploads.html this snipet of code change active class for clicked item.

EDIT 1:

For static pages (or served eg. by php) you don't need any aditional js code, BUT you should tweak nav to looks like in below examples (look where 'active' class is, sr-only span current is optional, but well placed in examples).

index.html (your base code)

<ul class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

library.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="library.html">Library<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

uploads.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="uploads.html">Uploads<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
</ul>

about.html

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="library.html">Library</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="uploads.html">Uploads</a>
    </li>
    <li class="nav-item active">
        <a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
    </li>
</ul>

This did absolutely work, BUT when I click on the nav-items, the HTML's for each nav-item doesn't show?! What can cause that? — Jens O. Anders Olsén, Mar 28 '18 at 09:36
I put event.preventDefault() for dynamic demo. In static .html page in right place change location `active` class. eg. in library.html nav should looks like: `
Have you 4 files index,html, librrary.html, uploads.html, about.html ? Or how you serve contents for example for about.html url ? — SlaWitDev, Mar 28 '18 at 09:59
Look carefully into my Edited answer. Check navigation in each file (eventually delete earlier script code) you don't need additionally JS only correct html in NAV for each file. — SlaWitDev, Mar 28 '18 at 10:48
Thank you so much, I feel stupid now that I've realized my mistake. If feels quite obvious and absolutely no JS och JQ needed :) — Jens O. Anders Olsén, Mar 29 '18 at 08:28
You are welcome. :) Everyone has start of learning stage, or can just stuck in. — SlaWitDev, Mar 29 '18 at 11:30

score 2 · Answer 2 · answered Mar 28 '18 at 09:35

2

I think that the easiest solution is to check the pathname of in the location object of the window and change the nabber state accordingly.

Something like this would work:

var pathname = window.location.pathname,
pages = ['home', 'library', 'uploads','about'];

$('.nav-item').each(function(i) {
 if (pathname.includes(pages[i])) this.addClass('active');
 else if (this.className.includes('active')) this.removeClass('active');
});

answered Mar 28 '18 at 09:35

ggwzrd

128
10

I got this when i tried it out: Uncaught TypeError: this.removeClass is not a function – Jens O. Anders Olsén Mar 28 '18 at 09:38
That means that `this` is not a JQuery element. Try to replace the `this.removeClass('active') with `console.log(this)` and check what it's printed out in the console. Try also to add a `$(document).ready(function() { [..code in the post..] })`, maybe the window it's not loaded when the js runs. – ggwzrd Mar 28 '18 at 09:43
This is very useful with swup.js, swup.js won't update the header style when page changes, manually update it with your code snippet is working very well! Thanks! – Semicolon Jun 03 '20 at 19:23
No problem @Semicolon :) – ggwzrd Jun 11 '20 at 12:55
Awesome answer! I had some issues with 'this' as well, and in spots I changed 'this' to '$(this)' and that solved the issue for me. I had to use the browser console and test a bunch of runs using console.log() until I was able to get this to work for my use case, but in the end it worked great! Great code base to work from! – yeamusic21 Jun 08 '21 at 15:38

How do I make Bootstrap navbar change active state?

2 Answers2

Linked