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!
Related
I'm trying to get the navbar menu to appear in the 'header-container' menu, but for some reason, the navbar links flow outside (before revising browser window). I cannot figure out why but I suspect it has something to do with this line:
div class="collapse navbar-collapse navHeaderCollapse"
Whenever I add a float left to the navHeaderCollapse the links inside. Adding an overflow: none; just hides the overflow but there shouldn't be any overflow in the first place.
Why are the links not staying inside the header-container div?
#header-container{
width: 960px;
height: 50px;
background: #ff0;
margin: 0 auto;
}
<head>
<meta charset="UTF-8">
<!-- STYLESHEETS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header id="header-container">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
</div>
</header>
Just erase the fixed width: 960px; from your #header-container CSS rule
https://codepen.io/anon/pen/LjVjqE
From my point of view, you are adding .container div inside your structure. It inherits rules from bootstrap and breaks your layout.
<header id="header-container">
<div class="navbar navbar-default navbar-static-top">
<div class="container"> <!-- remove this element, or change name-->
<div class="navbar-header">
The problem is that you're adding a fixed width to a an element that contains the Bootstrap header. When .navbar-right (defined by Bootstrap) tries to float to the right, it breaks the layout unless the parent has a width of 100% (the default). Simply remove your width specification on #header-container and your links will correctly sit within your header:
<head>
<meta charset="UTF-8">
<!-- STYLESHEETS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header id="header-container">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
</div>
</header>
**EDIT**
In order to have the navbar occupy a maximum width of 960px, you're looking to modify the predefined .container class, rather than creating a brand new one. Note that navbar-static-top forces you to have a full-width (as it's static), so you'll also need to remove that.
.container {
max-width: 960px;
}
<head>
<meta charset="UTF-8">
<!-- STYLESHEETS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header id="header-container">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
Brand Name
<!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<!-- HAMBURGER MENU -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
</div>
</header>
Hope this helps! :)
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 using bootstrap and have this line in my html code
<a class="navbar-brand" style="font-weight: bold">Brand Name</a>
I want to increase the font size and therefore I modified it to
<a class="navbar-brand" style="font-weight: bold;font-size: larger">Brand Name</a>.
However this doesn't change anything. What am I doing incorrectly. I am assuming bootstrap css is overriding my commands, how do I force it to increase the font size? Thank you.
working Snippet (I want to increase the size of Brand Name in website)
<!DOCTYPE html>
<html lang="en">
<head>
<title> Brand Name</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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="MyStyleSheet.css" />
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!---logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<a class="navbar-brand" style="font-weight: bold">Brand Name</a>
</div>
<!--menu Item here-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">
About Us
</li>
<li>
Projects
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
larger, smaller
Larger or smaller than the parent element's font size, by roughly the
ratio used to separate the absolute size keywords above.
See MDN
You're most likely not seeing any increase in the size of the font because font-size: larger is inheriting it's base size from body set by Bootstrap which is 14px, navbar-brand is 18px by default so you're actually decreasing the font-size by using larger. If you inspect the navbar-brand class when applying larger, it's size is computed at 16.8px.
You can always just set it's size with px, em or rem though.
See working Example Snippet.
.navbar.navbar-inverse .navbar-brand {
font-weight: bold;
font-size: 2.5rem;
}
.navbar.navbar-inverse .navbar-nav > li {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<a class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">
About Us
</li>
<li>
Projects
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
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.
Using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I get the following:
Yet, in the example on the Bootstrap site, all of its collapsed links form a vertical list. Any ideas on what I'm doing wrong?
EDIT: Taking .pull-right out of the nav <ul> and replacing it with <div class="span8"> solved some of it. Unfortunately, it looks like my .brand element is causing some issues.
If I shrink my browser to the point where the collapsable nav button is next to my .brand, the links below don't form a list:
If I shrink the browser so the links form a list, then the button pops below the .brand:
Is there a way to keep the button on the same line as the .brand and force the links below to form a vertical list?
From the looks of your code, you are missing a very important piece of code in there.
You need to link bootstrap-responsive.css or bootstrap-responsive.min.css
Additionally, this is what your menu should look like:
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<div class="pull-right nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
You must be using inline-block or float:left.
If so then remove float and use display:block