I am trying to implement the responsive bootstrap navigation bar but having trouble handling the collapsed state.
Once I resize the window I get to the state where this button appears:
When I click this button nothing happens.
Below I attached my code for my current navigation bar. Could it be the naming of the divs that is wrong? When I read the documentation it says that the collapse plugin is required - shouldn't this plugin be included in the standard bootstrap for angular?
I also tried this solution: https://stackoverflow.com/a/17672546 - but it is as if when the state is changed in the collapse="isCollapsed" no effect is achieved.
<nav class="navbar navbar-default" role="navigation" >
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#">My Application</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/logbook')}">Log Books</li>
<li ng-class="{ active: isActive('/logentry')}">Logs</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/logentry/create')}">Create Log</li>
<li ng-class="{ active: isActive('/status')}">Show Status</li>
<li ng-class="{ active: isActive('/statistics')}">Statistics</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
If you are not using twitter bootstrap's javascript then you can use angular-ui bootstrap's collapse directive to collapse your navbar. Just make sure to put an ng-click directive on the .navbar-toggle button to negate the current value of the collapse variable. Add another ng-click to the .navbar-collapse element to collapse the navbar when a link has been clicked.
Here's a DEMO
<body ng-click="collapse = false">
<div class="navbar navbar-default" ng-click="$event.stopPropagation()">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
ng-click="collapse = !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">
Title
</a>
</div>
<div class="collapse navbar-collapse"
ng-controller="HeaderController"
collapse="!$parent.collapse" ng-click="$parent.collapse = false">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
</ul>
</div>
</div>
</div>
</body>
UPDATE:
1 I noticed that you have an ng-controller within the .navbar-collapse item, since an ng-controller creates a child scope, you have to use collapse="!$parent.collapse" and ng-click="$parent.collapse = false" within that element itself. The plunker has been updated above, check it out.
2 As a side note, you can take it a step further and add an ng-click="collapse = false" within your html body to collapse the navbar when the user clicks outside of the navbar, just make sure to add ng-click="$event.stopPropagation()" to the .navbar element to avoid collapsing it while the user is clicking the .navbar-toggle.
Your code seems to be fine please see here http://jsbin.com/xinujuvi/1/edit
make sure that you've got reference to bootstrap.min.js script
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Make sure to referrence this :
ui-bootstrap-tpls-0.11.0.min.js
You can download it from their site
And this is the code :
<nav class="navbar navbar-default" role="navigation" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-danger" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar btn-info"></span>
<span class="icon-bar btn-info"></span>
<span class="icon-bar btn-info"></span>
</button>
<a class="navbar-brand">YouSite</a>
</div>
<div class="navbar-collapse collapse" collapse="!isCollapsed" id="navbar-collapse-1" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/logbook')}">Log Books</li>
<li ng-class="{ active: isActive('/logentry')}">Logs</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/logentry/create')}">Create Log</li>
<li ng-class="{ active: isActive('/status')}">Show Status</li>
<li ng-class="{ active: isActive('/statistics')}">Statistics</li>
</ul>
</div><!-- /.navbar-collapse -->
Related
I am using bootstrap to make menu upper-right.
For desktop there are four menu shown on the upper-right correctly
If I make browser narrower for mobile environment.
The icon with there line appears, but even I click it, nothing happens.
These are my source code , is there any point???
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="/whitebear/web/app_dev.php/" class="navbar-brand">
<img height="30px;" src="/whitebear/web/bundles/acmetop/img/whitebearLogo.png"></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-main" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Nice</li>
<li>Q & A</li>
<li>login</li>
<li><a href="/whitebear/web/app_dev.php/register/" >register</a></li>
</ul>
</div>
</div>
</div>
Add a div to wrap the menu list with id of data-target attribute value(#navbar-main)
<div id="navbar-main" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
// li list
</ul>
I'm creating a responsible navigation bar using Bootstrap. Now it looks like:
in expanded view, and:
in collapsed view.
In the normal view it looks okay, however in collapsed view I'd like to keep in the bar Sign Up links and not to have it in the collapsed list. Something like this (this screenshot was created in graphical editor):
This is my code:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
</ul>
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
Fiddle: https://jsfiddle.net/aqgtmy6w/4/
I found this post but collapsed list there is broken, some links shifted left and right.
How can I achieve keeping some links in navbar on collapsing, and how to exclude them from list (so that not to duplicate them)?
Just put the sing up link inside <div class="navbar-header"> and add class="navbar-brand pull-right" to your sign up link. That's it.
Working Snippet
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#media(min-width:768px){
#sm-view {
display:none;
}
}
#media(max-width:767px){
#lg-view {
display:none;
}
#sm-view {
font-size: 14px;
}
}
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
<a id="sm-view" class="navbar-brand pull-right" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="lg-view"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
</ul>
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
To have same styling as the nav-links and not like the navbar-brand just add this--- #sm-view {font-size: 14px;} to your media query #media(max-width:767px).
I have a problem with my bootstrap navbar, when it's full screen a small icon-bar appear on top, and when resizing the window the same icon-bar remain there and the button doesn't appear, first here's the code:
<header>
<nav role="navigation" class="navbar navbar-inverse" style="border-radius:0px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Movies List</li>
<li>Genre List</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
</header>
And here's a screenshot of what it looks like:
Looks like you may be missing the javascript component include:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Its the issue from your Javascript with CSS, Button is always reflecting which means your Nav Bar is not converting as Button when image is enlarged
You can use this its easy and convenient Boot Flat
I have a webpage which has a standard bootstrap header (with a logo and dropdown section) and a sidebar for navigation.
I'm trying to make the sidebar collapse when the screen size is small. For this, I've made a toggle button which collapses the menu just fine. But the problem is that it seems that even when the collapse-able menu is closed, some contents still show up on top of everything.
Here's a screenshot to show you what I mean.
The purple box shows that even when the menu is closed, its contents somehow show up on top of the other elements.
Is there a fix for this?
Here's the code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<span class="caret"></span>
<a class="navbar-brand pull-right" href="#">Company Logo</a>
</div>
<ul id="side" class="nav navbar-nav collapse visible-xs">
<li>Home</li>
<li>Stuff</li>
<li>List Example</li>
<li>Contacts</li>
<li class="dropdown">User <span class="caret"> </span>
<ul class="dropdown-menu">
<li>Profile</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
Try adding this to the navbar-header
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
and remove the visible-xs too from there.
How can I use two navbar-toggle menus next to each other? If I click on the first icon it will open normally but if I click on the second icon, the first one doesn't close.
Here is what I am trying to do
<nav class="navbar-blue" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-default">
<button type="button" class="navbar-toggle navbar-user" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#">
Logo goes here
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-default" id="navbar-collapse-1">
<ul class="nav navbar-nav client-nav navbar-right">
<li>
<a class="active" href="#">My Projects</a>
</li>
<li>
Search
</li>
<li>
Post Project
</li>
<li class="hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-user"></span><span class="fa fa-sort-desc"></span></a>
<ul class="dropdown-menu client-dropdown">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
<!-- User menu to show on screens < 768px -->
<div class="collapse navbar-collapse navbar-default" id="navbar-collapse-2">
<ul class="nav navbar-nav client-nav navbar-right">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I had to update bootstrap to the latest version. Your demo is using 3.0.0 whereas 3.3.5 is the latest. Regardless, according to the documentation from bootstrap's site, you can accomplish this by listening for the show.bs.collapse event and triggering .collapse('hide') for the other menus.
$(function(){
$('.navbar-blue .navbar-collapse').on('show.bs.collapse', function(e) {
$('.navbar-blue .navbar-collapse').not(this).collapse('hide');
});
});
Demo: Jsfiddle