Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap navbar Active State not working

I have bootstrap v3.

I use the class="active" on mynavbar and it does not switch when I press menu items. I know how to do this with jQuery and build a click function but I'm thinking this functionality should be included in bootstrap? So maybe it is a JavaScript issue?

Here is my header with my js/css/bootstrap files I have included:

<!-- Bootstrap CSS --> <link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href= "/stylesheets/styles.css" />  <!--jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>  <!-- Bootstrap JS --> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap/js/bootstrap-collapse.js"></script> <script src="/bootstrap/js/bootstrap-transition.js"></script> 

Here is my navbar code:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">         <div class="container-fluid">             <div class="navbar-header">                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                 </button>                  <a class="navbar-brand" href="/index.php">MyBrand</a>             </div>              <div class="collapse navbar-collapse navbarCollapse">                 <ul class="nav navbar-nav navbar-right">                     <li class="active">                         <a href="/index.php">Home</a>                     </li>                      <li>                         <a href="/index2.php"> Links</a>                     </li>                      <li>                         <a href="/history.php">About</a>                     </li>                     <li>                         <a href="/contact.php">Contact</a>                     </li>                      <li>                         <a href="/login.php">Login</a>                     </li>                 </ul>             </div>         </div>     </nav> 

Am I setting this up right?

(On an unrelated note, but possible related? When the menu goes mobile, I click the menu button and it collapses. Pushing it again does not un-collapse it though. So this issue,. with the other, both signify wrong JavaScript setup perhaps?)

like image 902
TheLettuceMaster Avatar asked Jul 01 '14 16:07

TheLettuceMaster


People also ask

How do I make navbar items active?

To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.

How do I set bootstrap active class to NAV menu?

To set the active class to the navigation menu dynamically by scrolling or clicking on the navigation links, the active class is to be set on each section depending on the position of the webpage. To add methods and variables, JavaScript is used.

How do you make an active page in HTML?

A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.


1 Answers

You have included the minified Bootstrap js file and collapse/transition plugins while the docs state that:

Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
Include only one.

and

For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

So that could well be your problem for the minimize problem.

For the active class, you have to manage it yourself, but it's just a line or two.

Bootstrap 3:

$(".nav a").on("click", function(){    $(".nav").find(".active").removeClass("active");    $(this).parent().addClass("active"); }); 

Bootply: http://www.bootply.com/IsRfOyf0f9

Bootstrap 4:

$(".nav .nav-link").on("click", function(){    $(".nav").find(".active").removeClass("active");    $(this).addClass("active"); }); 
like image 108
Pete TNT Avatar answered Oct 13 '22 15:10

Pete TNT