Make bootstrap 4 navbar active with javascript

Want to design your website navigation bar like a professional but you but don’t know much about coding. Don’t be sad in the beginning everybody is nobody. Welcome guys in this post we will learn how to set active class to your bootstrap 4 navigation bar with a simple script code. This is going to be very helpful if you are new and want to become front end developer, because these are basics of website designing.

What is bootstrap?

Bootstrap is an important framework of css which is helpful in to make your website responsive according to the screen size. The main motive of bootstrap is to make your website mobile friendly and it is developed by twitter.
Bootstrap is easier than learning html, in it you have learn only simple classes names. If you are new to bootstrap and don’t know how to create bootstrap menu then you can visit w3schools.com for its classes. Below I am showing you how does the bootstrap menu code looks like.

Why we need to set active class to navigation bar.

The main reason behind this is it gives a classic look to you website, and with this user don’t get confused on which page he is. Almost maximum websites have active class on their navigation bar.

When I searched this topic did not get any perfect solution, the codes I found did not work for live website. They simply worked when anchor tag has # sign at the place of links. So I just decided to create a post on it, feel free I will tell you the most simplest wayto give your bootstrap navbar a dynamic look without any php code. Below is the code written for bootstrap 4 navbar active class this code sets automatically active class to current page in the menu bar.

<script>
$(document).ready(function () {
var url = window.location;
$(‘.navbar-nav .nav-link[href=”‘+ url +’”]’).parent().addClass(‘active’);
$(‘.navbar-nav .nav-link’).filter(function() {
return this.href == url;
}).parent().addClass(‘active’);
});
</script>

If you are using another version of bootstrap rather than 4 then you need simply change the name of classes (.navbar-nav .nav-link) in the script code.
After setting active class to navbar, the next thing you don’t like may be navbar active class color. Bootstrap provides default color for navbar active class, and for beginners it seems to be hard to change that color and add new styling to it. Because you can’t change that color with a single class, for changing that color you have to open the bootstrap file for editing and file the class where the color has been set.

But it seems difficult task to finding a class in bootstrap file, I am telling class names where you can directly over write the bootstrap class. In this picture the classes are shown that can directly change the color of navbar active class.

So guys this the world simplest way to set bootstrap navbar active class automatically. If you have any question regarding to this post, feel free to ask in the comment section. Thanks for reading, keep visiting.

Leave a Reply

Your email address will not be published.