we are developing an application and we are using twiiter bootstrap 3
we have created a navigation bar with nav-pills
<ul class="nav nav-pills head-menu">
<input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
<li>
<a href="#" id="welcome">
Welcome text ...
</a>
</li>
<li>Kitchen</li>
<li><a href="#" id="programma" > Programma</a></li>
<li><a href="#" id="foodart" >foodart text</a></li>
</ul>
can anyone with bootstrap experience help us, if we can make this nav-pills collapsible and responsive when size is reduced just as we can do easily with nav-bars?
thanks in advance
First, you need to include HTML for the menu button once your menu collapses.
<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>
Then, you need to wrap your nav-pills in a div containing Bootstrap's collapse class.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-pills head-menu">
<input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />
<li>Welcome text ...</li>
<li>Kitchen</li>
<li><a href="#" id="programma" > Programma</a></li>
<li><a href="#" id="foodart" >foodart text</a></li>
</ul>
</div>
You can then wrap all of this in a fluid-container and Bootstrap's navbar navbar-default with role=navigation.
Additionally, you could add a bit of jQuery to handle "stacking" your menu when it is collapsed instead of remaining horizontal. To do this, Bootstrap's events for show/hide collapse will do the trick: show.bs.collapse and hide.bs.collapse.
//Stack menu when collapsed
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function() {
$('.nav-pills').addClass('nav-stacked');
});
//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function() {
$('.nav-pills').removeClass('nav-stacked');
});
Working Demo Here
Another method to try is to set navbar li to 100%:
#media (max-width: 768px) {
#navbar li { width:100%; }
}
Complete Solution
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
background-color: linen;
}
.nav {
background-color :#722872;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar {
background-color :#722872;
}
</style>
</head>
<body>
<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 nav-pills navbar-right">
<li class="active">Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
OR
See it in CodePan
#Tricky12 has a good solution, i used for myself, just changed the last part.
//Unstack menu when not collapsed
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function() {
$('.nav-pills').removeClass('nav-stacked');
});
The part: hidden.bs.collapse trigger when the menu is fully closed, while hide.bs.collapse trigger when it starting to close.
if you trigger the .removeClass('nav-stacked'); before collapsed menu it fully closed, will show the horizontal menu for a fraction of a second before is fully closed.
Hope this will help someone.
The .nav-justified class of bootstrap will take care of everything. This will resize the links in browsers wider than 768px. Smaller than that, the links will be stacked. Simply add it to the element and you are good to go.
<ul class="nav nav-pills head-menu nav-justified">
...[rest of your code stays the same]...
Doesn't address the question how to collapse the items, I am stating how to stack them. So my answer might not help, but I think it contributes, hopefully.
Related
Can't quite seem to wrap my head around a bootstrap nav having elements on bottom and top of navbar, while still utilizing the collapsable navbar.
Here is what I've tried: Fiddle
As you can see, I was able to achieve the text on top and bottom of navbar (while still using the collapsable navbar feature), but when you look at it in mobile (as in, when the menu is collapsed and you click on the hamburger logo), it's completely messed up.
So this has me wondering if perhaps I'm not approaching this the right way?
Here is the CSS:
#mainNavBarTop {
position: absolute;
margin-top: -10px;
top: 0;
left: 0;
}
#mainNavBarBottom {
position: absolute;
margin-bottom: -10px;
bottom: 0;
left: 0;
}
and HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" 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><img src="" /></div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav" id="mainNavBarBottom">
<li class="bottom">About</li>
<li class="bottom">Contact</li>
</ul>
<ul class="nav navbar-nav" id="mainNavBarTop">
<li class="bottom">About</li>
<li class="bottom">Contact</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group"><input class="form-control" type="text" placeholder="Search"/></div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</div>
</div>
</nav>
If you want the navigation links to display over multiple lines on a desktop view, all you have to do is specify a width for the navbar that accommodates for the image, and also add enough items to the dropdown so that they overflow.
Optionally, you can have the links pressed up against the right rather than the left by adding float: right to the li elements of the navbar. Note that this will reverse the order of the items in the list, so you may wish to list the links in reverse order in the HTML itself if you opt for this.
You can see this by expanding the snippet below, or by viewing the JSFiddle here. The links all stay directly below one another in the collapsed menu, though occupy two lines in the desktop view. Expanding the JSFiddle to the maximum width shows that the links will revert back to a single line when there is enough space to contain them.
#media (min-width: 768px) {
.navbar-nav.pull-right {
width: calc(100% - 120px); /* 100% - image width */
}
.navbar-nav>li {
float: right; /* Optionally align items to the right */
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container">
<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>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/120x30" width="120px;" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li>Saved searches</li>
<li>Settings</li>
<li>About</li>
<li>Sign In</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
Hope this helps! :)
I was learning bootstrap from w3schools. Please find the link.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h
In this link, in nav bar header I could notice the span tag as
<span class="icon-bar"></span>
it is used more than once in nav bar header. I removed those span tags from code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<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">
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
Still the code is responsive and no visible changes were there.. Is there any use of it?
Also could you please simply explain why class "sr-only" is used? Thanks in advance.
"icon-bar" is used for creating so called "burger" (like this ≡) on mobile devices - it creates button with short horizontral lines with dropdown instead of wide original menu
"sr-only" means "screen-reader only":
Screen readers will have trouble with your forms if you don't include
a label for every input. For these inline forms, you can hide the
labels using the .sr-only class.
The "sr-only" class is a tag that makes the content hidden except for "reader-devices" or "read-view" in some browsers.
Try to restore down your browser and minimize browser windows area as small as possible. nav-bar will change to responsive layout like in the up-right corner of this image.
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
gives this view to responsive menu. And sr-only means screen reader only. Screen readers will have trouble with your forms if you don't include a label for every input.
I have created a nav bar, and styled it my way. However, when I make the window small, and click in the right corner on the button, the nav bar extends all the options and that's it. Once I click on one of the options, it will not close i.e. it will not collapse back. What am I doing wrong? Ive been exploring with this for a while now and cannot see the mistake.
Here is my code:
<nav 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-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>
<!-- use a responsive image option so this logo looks good on devices - recommend using something like retina.js -->
<a class="navbar-brand" href="#/">Test</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Us
</li>
<li>What We Do
</li>
<li>Examples
</li>
<li>Testimonials
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
In my index.html, I link to the header.html which works fine, and the following styles:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
And the javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Clicking the links doesn't automatically collapse/toggle the Bootstrap navbar. This is by design.
If you want them to close after click you can add this to the links..
data-toggle="collapse" data-target=".navbar-collapse.in"
Demo: http://www.codeply.com/go/Ia4LLB8Yyp
You could also use jQuery like this..
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
I am trying to make a Navbar for my site that has a dropdown menu on the left, image in the center, and collapsable item on the right. I am using bootstrap with less to style the navbar, but I am having trouble.
I have searched Stack overflow looking for ways to make this work, like this question, but the solutions there aren't working for me. I can't seem to get my image to line up so that its horizontal axis is centered with the dropdown menu, collapsable item, and navbar container. When I try the solutions like in the previously mentioned link, taking the image out of the flow of the page by maxing its position fixed, it always appears below the navigation bar. I can fix this for my screen by messing with the CSS attributes, but as soon as I resize the window things look awful.
Is there a way (possibly using less) to style the bootstrap navbar so that no matter what the size of the window is, I have an item on the left, image in center, and item on the right, all sharing a common horizontal center axis with the navbar?
EDIT
Okay, so I have changed my mind and decided to just add some links on the left, an image in the center still, and some links on the right. When the screen gets smaller, I want the links to collapse to the right offering a toggle button for a menu. The collapsing is working fine, but when the links are on the screen I want them to be horizontally centered in the nav bar, along with the image. The image right now is partially in the nav bar and partially out. I also want the image to slide to the left when the links collapse at smaller screen sizes. Here is my code right now:
Just a note that I am using django to serve the html, hence the syntax for the image src.
#logo-with-slogan {
max-width: 35%;
padding: 3% 0 3% 0;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">
<img id="logo-with-slogan" src="{% static " img/LogoWslogan.jpg " %}" />
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</nav>
So you're looking to do something like this, with the image fitted:
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand navbar-center" href="#">
<img src="http://placehold.it/100x40" alt="Logo Here">
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</nav>
CSS
.navbar-brand {
float: none;
padding: 5px;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
Demo: JSFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Navbar bootstrap</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
Navigation bar is coolest component of bootstrap, you can easily create cool responsive navigation header for your website.
For information and detail please see this article..
steps to create navbar in bootstrap
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#testNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo / SiteName</a>
</div>
<div class="collapse navbar-collapse" id="testNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</nav>
I have a web page and I'm trying to print it. I'm using a bootstrap navbar. The problem is that when I use the bootstarp navbar the printing preview is not making any sense. I see lines of code int the page instead of the actual content.
the problem only happens when I add the refferance to bootstrap.min.css(as seen on the code below)
my page (the relevant part):
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="design.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="print" href="design.css">
<body>
<div class="navbar navbar-inverse navbar-static-top" >
<div class="container">
<img src="http://sphotos-h.ak.fbcdn.net/hphotos-ak-prn1/41032_147610068590926_4173889_n.jpg" id="logo">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><img src="https://cdn1.iconfinder.com/data/icons/nuvola2/128x128/devices/print_printer.png" id="logo" ></li>
<li>Register</li>
<li>Clients</li>
<li>Administrator</li>
<li>Accounts</li>
<li>Illustration</li>
<li class="active">שיבוץ</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"></li>
</ul>
</div>
</div>
</div>
</body>
What do I need to do so the page would print correctly (without the navbar)?
this is an image of the problem: http://postimg.org/image/mk0vwde8b/6e80e14d/
You can use a CSS media-query to create a class that hides when the page is printed.
#media print {
.print-hide .print-hide * {
display: none !important;
}
}
Now add the class .print-hide to the navbar and anything else you'd like to hide when printing the page!