I have a functioning bootstrap navbar through use of ui.bootstrap of Angular-UI. For the mobile navbar, I want the navbar to collapse when a link is clicked. The toggle button functions as expected, but I can't get the ng-click="isCollapsed = !isCollapsed" to work on the nav links.
<div class="navbar navbar-default navbar-fixed-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
App
</div>
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}" ng-click="isCollapsed = !isCollapsed">{{item.title}}</a>
</li>
</ul>
</div>
</div>
</div>
In my controller, the applicable code is:
$scope.isCollapsed = true;
I had the same issue. Not sure if this is the best solution but I just added this in the main controller:
$rootScope.$on('$stateChangeStart', function(event, toState){
$scope.navbarCollapse = true;
});
It doesn't exactly do what you ask, because it's not triggering the collapse on click event. But it does trigger the collapse on each state change which for this purpose is the same.
Related
I am just not sure what i am missing on this drop down hamburger iam pretty sure my data-target is right
<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="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">T<span> - </span>C<!--<img src="#">--></div>
</div>
<div class="navbar-collapse collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You need an onclick event on your button. There's currently nothing telling it what to do when you click the button. To get you started, you'll need to modify you button tag to something like:
<button onclick="toggleMenu" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
Then, add some script:
function toggleMenu() {
let menu = document.getElementById('menu');
menu.classList.toggle('open-menu'); //toggle is an awesome built in function that does just what you want. It will add this class if it doesn't exists, and remove it if it does
}
After that, you'll have to add some CSS to style your menu for when it's opened.
Looks fine to me, just be sure that your view width is less than 768px, otherwise the hamburger will be hidden.
I am far from being a JS/jQuery expert and just found a bug on my site. After adding this piece of code to my slider: my bootstrap navigation started to stop working. This is the code of the navigation:
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script> $('#myCarousel').carousel({ interval: 3500 }) </script>
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><br /></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown ">
If I now press to open the navigation I can't close it again and also I can't open the dropdown menus of my navbar.
I have a bootstrap nav menu like this
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">
<img alt="Brand" src="img/pluck.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div><!--/.nav-collapse -->
</div>
</nav>
When I tap it, make no selection and tap it again it stays focused.
I would like the button to blur when the menu collapses. So I have tried
$('#navbar').on('hidden.bs.collapse', function () {
$('#navbar').blur();
})
I have also tried .navbar-toggle but the menu button still stays focused. How to make the menu button blur.
There seemed no way to do this (on mobile) so I just added and removed the background as required.
$('#navbar').on('hidden.bs.collapse', function () {
$('#navbar').blur();
$('.navbar-toggle').css("background-color","#f8f8f8");
})
$('#navbar').on('show.bs.collapse', function () {
$('#navbar').focus();
$('.navbar-toggle').css("background-color","#ccc");
})
You need to click somewhere else to remove it's focus, Try this...
$('#navbar').on('hidden.bs.collapse', function () {
$('body').click();
})
Okay so I'm trying to create a navbar that collapses the hamburger menu when a link is closed. The problem is the method I'm using also opens the hamburger menu when I click a link. This is okay with all the regular links in the navbar. But I do not want this to happen with the navbar-brand. I need it to only collapse the menu when it's opened. However, even when the menu is closed the navbar-brand on click will open it.
here is the code, I tried all sorts of javascript but I think I need help with my specific situation.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar"><img style="height:31px; width:170px;" src="images/img.svg"></a>
<!-- Start Collapse Button -->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT</li>
<li>CLOUD</li>
<li>HIPAA</li>
<li>SECURITY</li>
<li>CONTACT US</li>
<li>ABOUT</li>
</ul>
</div>
<!-- End Links -->
</div>
You can hook up to the click event of the hamburger and reset the css classes on the menu
$('.navbar-brand').click(function() {
$('.navbar-toggle').attr('aria-expanded', false);
$('.navbar-toggle').addClass('collapsed');
$('.navbar-collapse').attr('aria-expanded', false);
$('.navbar-collapse').addClass('collapse');
$('.navbar-collapse').removeClass('in');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#brand" data-target="#navbar">
<img style="height:31px; width:170px;" src="http://lorempixel.com/170/31" />
</a>
<!-- Start Collapse Button -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Collapse Button -->
</div>
<!-- Start Links -->
<div id="navbar" class="navbar-collapse collapse">
<!-- Left Links -->
<ul class="nav navbar-nav">
<li>IT
</li>
<li>CLOUD
</li>
<li>HIPAA
</li>
<li>SECURITY
</li>
<li>CONTACT US
</li>
<li>ABOUT
</li>
</ul>
</div>
<!-- End Links -->
</div>
I'm trying to get the sticky bootstrap menu to work on desktops. When i scroll down to a certain div element i want the sticky menu to appear BUT when the user scrolls back up and past that div element i want the sticky menu to be hidden. Can't quite figure out whats going on.
<!--sticky desktop menu-->
<div id="nav">
<div class="navbar navbar-default navbar-fixed-top hidden-lg navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" href="/"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>PRICING</li>
<li>WATCH OUR VIDEO</li>
<li>REAL LIFE TESTIMONIALS</li>
<li>FAQ'S</li>
<li>ABOUT US</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Script below;
$('#nav').affix({
offset: {
top: $('.desktopSticky').height()
}
});
Site can be seen here: http://bit.ly/1i4VUxv
If you're ok doing it via scroll-position vs a defined div, this will work for you:
$(function() {
var div = $(".sticky");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
div.removeClass('hidden-lg').addClass("visible-lg");
} else {
div.removeClass("visible-lg").addClass('hidden-lg');
}
});
});
See the bootply: http://www.bootply.com/CGY86c9Baz
If you prefer it be activated by a specific div, I think scrollspy may be your solution, but I don't know how to make it work!