Set Your Bootstrap Navbar Class To Active On Page Load

There are times when you will need to Dynamically set your Bootstrap Navbar items to Active without having to do it manually.

I will show you how to achieve this. The code was gotten from stackoverflow.

Here’s the full code.

WHAT YOU SHOULD DO.

• Replace ul#navigation with your navbar’s selector.
• Remember (#) is for ID while (.) is for class
• Remove parent() function if your navlink has no parent element.

Explanation

The Code below shows that my Navbar Selector is ul.navbar-nav.

Replacing ul#navigation with my Navbar selector (ul.navbar-nav) will be :

Now I want you to Take note of the parent() function in the code above.

If your Navlink does not have any parent element, you can remove the function.

Navlink is that Element in your Navbar that contains the href attribute. It’s usually the <a> tag.

The parent() function adds the active class to the parent element of your navlink.

In some cases, the active class needs to be added on the navlink itself, hence there’s no need for the parent() function.

The Image above shows that the navlink has a parent element which is <li>. In that case, the code will work with the parent() function.

The Image below shows that the navlink does not have a parent element. In this case, the code will not work correctly with the parent() function.

We need to remove the parent() function because the active class needs to be set on the current element not the parent element.

Let me know if there’s anything related to this script I can help you out with in the comment section!

Thank You !