Bootstrap Navbar Element Select Active in Laravel

So I have a problem and as per usual given I am trying to learn frontend stuff i am out of my depth. I am currently writing a website that has a forum, live chat, profile, and a few other things. These I would call "Menu items" with sections of those i.e. unread messages being placed on a dropdown menu item for messages. As per blade fashion I am using a menu blade which is part of the layout blade and finally the page incorporates whichever layout it wants.

The last solution I tried after seeing a post was to add or into the class section of the corresponding li for the menu item, this successfully updated some of the menu items styles but also broke the dropdown functionality.

Below is my code which still has my last solution contained within it:

 <nav class="navbar navbar-default navbar-fixed-top">
   <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand " data-toggle="tab" href="/">Home</a>
  </div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li role="presentation" class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="/forum" role="button" aria-haspopup="true" aria-expanded="false">Forum<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Newest Posts</a></li>
<li><a href="#">Trending</a></li>
<li><a href="#">Something</a></li>
<li role="separator" class="divider"></li>
<li><a href="/forum">Create New Post <span class="glyphicon glyphicon-edit"></span></a></li>
<li><a href="/forum">Your Posts</a></li>
</ul>
</li>
<li class=""><a href="/chat">Chat</a></li>

<li role="presentation" class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="#" role="button" aria-haspopup="true" aria-expanded="false">Messages<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Unread</a></li>
<li><a href="#">Read</a></li>
<li><a href="#">Sent</a></li>
<li role="separator" class="divider"></li>
<li><a href="/messages">All</a></li>
</ul>
</li>
</ul>

</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default"></nav>

I appreciate I am new and that most solutions require something like js or jquery, if this is the case you will need to be explicit in how and where I put it as I have never even thought of using it yet!

Thanks!

via Chebli Mohamed