I believe it is not responsive because I added navbar-fixed-top instead of what bootstrap uses, which is navbar navbar-default. Would you know how to make it responsive while the navbar is fixed?
<nav class="navbar navbar-fixed-top" role="navigation">
This is working for me
Here is an example of what it should look like.
<head>
<link href="styles/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>
</head>
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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="#"><img src="assets/images/logo.png" alt=""> </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Book</li>
<li class="dropdown">
<span class="glyphicon glyphicon-align-justify"></span> Table of Contents
<ul class="dropdown-menu">
<li>content 1</li>
<li>content 2</li>
<li>content 3</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
you can also see many examples of working navbars on the bootstrap site
Bootstrap examples
Related
I am very new to AngularJS and have a menu such as Home/Customer/Account/Other using
the bootstrap navbar component such as
<div class="navbar navbar-default navbar-inner navbar-inverse">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li data-ng-class="{'active':highlight('/home')}"
style="margin-left:1px;">
Home
</li>
<li data-ng-class="{'active':highlight('/customer')}" style="margin-left:1px;">
Customer
</li>
</ul>
</div>
</div>
Once I shrink the window, I get to see the sandwich button. Now, If I click say, Customer menu,I would like
to collapse the menu.
How can I do that? Please help me out.
$(document).ready(function () {
$("nav").find("li").on("click", "a", function () {
$('.navbar-collapse.in').collapse('hide');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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> <a class="navbar-brand">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a>
</li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2 (with data-toggle attribute)</a>
</li>
<li>Page3 (without data attributes, just jQuery)
</li>
</ul>
</div>
</div>
</nav>
I'm assuming that you are looking to close your collapsible nav menu when you click any item in the menu. If that's the thing which you are looking for then try this one as you are using bootstrap
<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
<a class="nav-item nav-link" href="#">Menu Item </a>
</div>
Bootstrap4
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-
collapse.show">Products</a>
</li>
Using jQuery for bootstrap4
$(document).on('click','.navbar-collapse.show',function(e) {
$(this).collapse('hide');
});
I want to use Bootstrap to create a hybrid single page application (for example like Ionic Tabs) that has fixed tabs at the bottom, a dynamic header at the top and a scalable content. Which attributes of the bootstrap framework can I use to achieve this?
Try this template
http://getbootstrap.com/examples/sticky-footer-navbar/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
The toggle button appears but it is not working. I've got a same code now in online as well and it is not working but in Plunker it is working.
Plunker - toggle button is working
Same code online - button is not working
And the code is:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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>
<div class="nalogo-wrapper">
<img class="img-responsive" src="http://placehold.it/50x50&text=Logo" />
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span> Etusivu</li>
<li>Palvelut</li>
<li>Yhteistiedot</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="main">
<div ng-view>
</div>
</div>
Thanks for help!
Sami
I just copied this out of a working project where I used angular-ui bootstrap:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<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="/#">Bake-Off</a>
</div>
<div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>
You must make some changes to your navbar to accomodate the collapse directive of Angular UI-Bootstrap. I wondered about this myself not so long ago, the question was already asked and answered over here:
Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)
Adding an alternative solution to the answer of Josh C, just changing the collapse to uib-collapse, based on the latest documentation
https://angular-ui.github.io/bootstrap/#!#collapse
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn navbar-btn" ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<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="/#">Bake-Off</a>
</div>
<div uib-collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li></li>
</ul>
<div class="container navbar-form navbar-right">
</div>
</div>
<!--/.navbar-collapse -->
</div>
</div>
I'm trying to get my navbar to collapse correctly. I have three links on the right that should disappear when my navbar collapses. Instead, they overlay the links I want to appear upon collapse. Any suggestions?
Here is my code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
XYZ
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav pull-left">
<li>Home</li>
<li>Projects</li>
<li>Finance</li>
<li>Resume</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li></li>
<li></li>
</ul>
</div>
</div>
####UPDATED CODE, but icons collapse on new row overlaying content #######
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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><img src="img/lior.jpeg">
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>Finance</li>
<li>Resume</li>
</ul>
<div style="float:right">
<ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The easiest way seem to use the http://getbootstrap.com/css/#responsive-utilities.
For your right navigation (icons) use:
<ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
This will hide the icons when the navbar has been collapsed.
Also read: Bootstrap 3 Multiple Nav bar Menus
I've created a JSFiddle with a dropdown navbar using angular-ui-boostrap's module "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"> <a class="brand" href="#">
My Responsive NavBar
</a>
<ul class="nav">
<li class="divider-vertical"></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle">
Menu 1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Entry 1
</li>
<li>Entry 2
</li>
</ul>
</li>
....
</ul>
</div>
</div>
</div>
As far as I understand this is the proper, angular kind of way to implement such a dropdown menu. The "wrong" way, in terms of angularjs, would be to include bootstrap.js and to use "data-toggle="dropdown"... Am I right here?
Now I'd like to add responsive behaviour to my navbar as done in the following Fiddle:
http://jsfiddle.net/ghtC9/6/
BUT, there's something I don't like about the above solution. The guy included bootstrap.js!
So what would be the correct angular kind of way to add responsive behaviour to my existing navbar?
I obviously need to use bootstraps responsive navbar classes such as "nav-collapse collapse navbar-responsive-collapse". But I don't know how...
I'd really appreciate your help!
Thank you in advance!
Michael
Update 2015-06
Based on antoinepairet's comment/example:
Using uib-collapse attribute provides animations: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- note the ng-init and ng-click here: -->
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
...
</ul>
</div>
</nav>
Ancient..
I see that the question is framed around BS2, but I thought I'd pitch in with a solution for Bootstrap 3 using ng-class solution based on suggestions in ui.bootstrap issue 394:
The only variation from the official bootstrap example is the addition of ng- attributes noted by comments, below:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- note the ng-init and ng-click here: -->
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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="#">Brand</a>
</div>
<!-- note the ng-class here -->
<div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">
<ul class="nav navbar-nav">
...
Here is an updated working example: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)
This seems to works for me in simple use cases, but you'll note in the example that the second dropdown is cut off.
You can do it using the "collapse" directive: http://jsfiddle.net/iscrow/Es4L3/
(check the two "Note" in the HTML).
<!-- Note: set the initial collapsed state and change it when clicking -->
<a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
<div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
That is, you need to store the collapsed state in a variable, and changing the collapsed also by (simply) changing the value of that variable.
Release 0.14 added a uib- prefix to components:
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
Change: collapse to uib-collapse.
Not sure if anyone is having the same responsive issue, but it was just a simple css solution for me.
same example
... ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
... div collapse="isCollapsed"> ...
with
#media screen and (min-width: 768px) {
.collapse{
display: block !important;
}
}
My solotion for responsive/dropdown navbar with angular-ui bootstrap (when update to angular 1.5 and, ui-bootrap 1.2.1)
index.html
...
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<input type="checkbox" id="navbar-toggle-cbox">
<div class="navbar-header">
<label for="navbar-toggle-cbox" class="navbar-toggle"
ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed"
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>
</label>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar" class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li uib-dropdown>
</b>
<ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
app.css
/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
display: block;
}
/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
display:none
}