This question already has answers here:
Bootstrap 4 Fixed top navbar shows collapsed and hides content
(4 answers)
Closed 4 years ago.
Using essentially the same css classes that are used on the twitter bootstrap site itself (and many other places), my horizontal navbar becomes vertical. I have the same div layout and classes (except the bs-* classes) as on the bootstrap page.
I hacked around this once by changing various settings from "block" to "inline" and such but there must be a better solution. Please advise.
Navbar html:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--
<div class = "navbar-header">
<a class = "navbar-brand"> Home </a>
</div>
-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Followers
</li>
<li>
Posts
</li>
</ul>
</div>
</div>
</nav>
This has been copied from bootstrap's navbar documentation. And hence it is responsive by default (show the preview in full-screen to by clicking Full page button on top right corner of the preview). If you don't require Branding to be there, you will just need to remove <a class="navbar-brand" href="#">Branding</a>.
More information about bootstrap 4's navbar can be found here - https://getbootstrap.com/docs/4.0/components/navbar/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Branding</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Followers<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</nav>
Related
I am trying to use the Header component of material design bootstrap in my React Application. And I pasted the below line of code from official website of Material design bootstrap to implement Header collapsible when screen size is small but it. Anyone have any idea what else need to do in order to make it work in react. I just paste it inside my react component. There is some kind of state I need to maintain here.
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-5 text-center bg-light">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
I have a webapp built with yeoman gulp-angular generator that uses bootstrap (with sass).
I have a collapsable navbar. When I click on the button with the 3 icon-bars, the menu is not displayed as expected.
I've tested my html apart and it works fine. Fiddle that works is: http://jsfiddle.net/7tzj3y5n/.
Code is:
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand">Merchandising Control</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menu" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<!-- Airline code label -->
<li>Airline:</li>
<!-- Airline code dropdown -->
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-main">
<li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
<a>{{airlineCode.value}}</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
It seems that my installation is not correct.
Could someone help me ?
Regards.
While Bootstrap's js uses data-* attributes on your HTML elements to enable expand / collapse on the navbar, Angular UI Bootstrap (which is what you should be using instead of Bootstrap's js when you have an Angular application) does not work exactly the same way. You can see Angular UI Bootstrap's documentation on Collapse to see how it works, however what you should be doing in short is the following:
Remove Boostrap's js and include Angular UI Bootstrap js an add 'ui.bootstrap' as a dependency of your Angular module (if you haven't already).
Update your HTML to use Angular UI Bootstrap's collapse, ie. something like the following:
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation" ng-init="navCollapsed = true" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<p class="navbar-brand">Merchandising Control</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menu" collapse="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<!-- Airline code label -->
<li>Airline:</li>
<!-- Airline code dropdown -->
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-main">
<li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
<a>{{airlineCode.value}}</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
What this code actually does is use the navCollapsed angular variable to control the menu's expand / collapse.
I just created an AngularJS project with grunt bower and Yeoman. Included Updated version to Angular 1.3.13. I want to use Angular UI bootstrap. I added Nav Bar which is responsive. But while on small screens, the drop down doesn't seem to work. When I click on dropdown the entire menu hides.
here is my index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="webClientApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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="#/">Web Client</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown"><a href="" class="dropdown-toggle"
data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p>
<span class="glyphicon glyphicon-heart"></span> from the Yeoman team
</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A, n, g, u, l, a, r) {
A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
(A[l].q = A[l].q || []).push(arguments)
}, A[l].l = +new Date, a = n.createElement(g), r = n
.getElementsByTagName(g)[0], a.src = u, r.parentNode
.insertBefore(a, r)
}(window, document, 'script',
'//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
</body>
</html>
I'm using all latest versions of JS. Here is my bower.json
{
"name": "web-client",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.13",
"bootstrap": "^3.3.2",
"angular-animate": "^1.3.13",
"angular-cookies": "^1.3.13",
"angular-resource": "^1.3.13",
"angular-route": "^1.3.13",
"angular-sanitize": "^1.3.13",
"angular-touch": "^1.3.13",
"angular-bootstrap": "0.12.1"
},
"devDependencies": {
"angular-mocks": "^1.3.13"
},
"appPath": "app",
"moduleName": "webClientApp"
}
The nav bar on full screen is working fine. But when I resize the browser size, The responsive bar is working. Menu will show up only on clicking the toggle buton. But when I click on drop down menu, the entire menu hides.
I have followed this StackOverflow Question and I got one Plunker Demo for it. It is working fine there.
But I'm using Latest versions of all files. So mine is not working. Here is my code what I tried in Plnker.
How to Solve this Issue? Thanks.
Your dropdown portion has changed.
Here's a Plunker
<li dropdown>
</b>
<ul class="dropdown-menu">
<li>...</li>
....
</ul>
</li>
UPDATED for AngularJS 1.5+ and angular-ui-ootstrap 2.5+
I tried several options for a working dropdown menu in AngularJS 1.5+ and UIBootstrap in the menu bar - nothing worked and was outdated, so I thought I'd share my solution here, also available in this repo commit.
What I did
Used the normal navbar example from https://angular-ui.github.io/bootstrap/#!#collapse
Combined it with button dropdown functionality as showcased in there from the example on https://angular-ui.github.io/bootstrap/#!#dropdown
The code (please ref to points 1 & 2 above for further guidance)
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<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="#">ToDoSth</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>Link 3 <span class="caret"></span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
<li role="separator" class="divider"></li>
<li>SubItem 4</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" class="nav-text" uib-dropdown-toggle>Signed in as John Doe <span class="caret"></span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li>Profile</li>
<li role="separator" class="divider"></li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
</nav>
Against the latest version of ui.bootstrap, 0.12.1, I think it should be a combination solution on Dropdown and Collapse of ui.bootstrap:
for Dropdown menu item, it use "dropdown" in outer element, and "dropdown-toggle" in inner element to trigger the dropdown action;
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
for the navbar collapse button, in responsive mode, it need to add "Collapse" directive in navbar toggle button and navbar div.
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
for implementation, please refer to: My Plunker
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
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
}