navbar

I want make the navbar active when i click it,, Here is the jquery i use $(document).ready(function () { $('.navbar li').click(function(e) { $('.navbar li').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); }); }); But because the preventDefault i can't go to the link that i want. It just make the navbar active, but it's not go to the link that i choose. And here is the link code : <div class="nav-collapse collapse"> <ul class="nav"> <li><a href='<?php echo site_url(' tampilan ') ?>'>Knowledge Base</a> </li> <li><a href

I spent some time searching for a way to do this & tried a couple (close) examples without success. Example here I'm basically trying to put the little android icons centered above the "Sub#" text in the subnav. Any help would be appreciated. The area of the code is: <span class=""> <span>Sub1</span> <i class="fa fa-android fa-lg"></i> </span> You should wrap each of icons in col-xs-2 with a col-xs-offset-1 in the first div to make it centered. You can use <br> tags to create a line break between your icon and your text. JSFiddle Demo <div class="col-xs-offset-1 col-xs-2"> <i class="fa fa

I only want my navbar buttons to be visible, while the actual bar that spans across the entire page has full opacity. Whenever I change the opacity of the navbar it affects the classes inside of it, even when I specify those classes to have no opacity. I've posted an image of what I'm trying to replicate. As you can see, the links appear in full, but the navbar is invisible, allowing the complete background image to show. It might look like a solid red bar, but I assure you it's an invisible navbar. Any help would be super appreciated! Thanks. Here's my navbar HTML code: <div class="custom_nav

I cannot figure out how to use intro.js on dropdown elements. I found a similar question with no answer there: IntroJS Bootstrap Menu doesnt work If you want to reproduce the error, follow these steps: http://recherche.utilitaire.melard.fr/#/carto You have to click on "Aide" (The green button on the top right), the problem occurs for the second step. on the change event, I do: $scope.ChangeEvent = function (e) { if (e.id === 'step2') { document.getElementById('step1').click(); } console.log("Change Event called"); }; When debugging, everything is working like a charm until that function end:

Is there an easy way to do something similar to this in bootstrap? A search bar with a drop down selector for a different category? I've been looking through their documentation, something similar to this but with the dropdown being attached to the search bar is what I'm looking for. I want it to be part of my navbar. I recall seeing an example online but can't seem to find it now. Also wondering where it would go in relation to my header at the moment <header class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <nav> <ul class="nav pull-left"> <li

i want highlight the menu point if the div is scrolled // or clicked. http://jsfiddle.net/WeboGraph/vu6hN/2/ (thats an example what i want) my code: (JS) $(document).ready(function(){ $('nav a').on('click', function(event) { $(this).parent().find('a').removeClass('active_underlined'); $(this).addClass('active_underlined'); }); $(window).on('scroll', function() { $('.target').each(function() { if($(window).scrollTop() >= $(this).position().top) { var id = $(this).attr('id'); $('nav a').removeClass('active_underlined'); $('nav a[href=#'+ id +']').addClass('active_underlined'); } }); }); }); my