Starting out with Bootstrap 3 and just getting used to it.
I've copied the navbar from the Bootstrap 3 docs becuase it has the exact functionality that I want and why invent the wheel hey.
I want to put a Jumbotron after the header but I want it to be full width, so according to the docs I don't enclose it in a container div.
The problem is that when I omit the container div it slides back under the header but I want it to start where the header ends. If I put it inside a container it sits nicely under it.
Can someone show me where I'm going wrong and how to fix it without making some hack div that pushes it down. Many thanks.
I want to keep the container in the header tag becuase I don't want these elements stretching to the sides.
<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
<img src="imagenes/logo.png" />
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right pull-down">
<li class="">
Menu
</li>
<li class="">
Galería
</li>
<li class="">
Calendario
</li>
<li class="">
BH Musicos / Talentos
</li>
<li class="">
Blog
</li>
<li class="">
Contacto
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<h1>Hello World</h1>
<p>Testing one two three</p>
</div>
If you look at the "Fixed to top" section on the navbar docs, there's an alert urging you to add padding to the body:
Body padding required
The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core
Bootstrap CSS.
Adding a container inside the jumbotron will also fix this.
Related
Is it possible to create the toggle button without using all the markup for default navigation?
I just want to create simple menu with the collapse feature. For example:
<div class="navigation">
<ul id="nav-to-collapse">
<li></li>
<li></li>
<li></li>
</ul>
<a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse">
</div>
Would this be possible? Its my first time using Bootstrap (3) and Its really confusing. I dont want to use all the navbar classes because then I would have to overwrite all the navbar styles just to create simple menu that I want.
EDIT: I managed to create the toggle without all the useless navbar classes but there is an issue with the toggle animation, when nav height is changed. Here is a jsfiddle to ilustrate the problem: Jsfiddle demo
Bootstrap's toggle function is a javascript function that is triggered when the user clicks the element with an attribute of data-toggle="collapse". If there is not also a data-target="" id specified, then the element that the user clicks is collapsed. However, in this bit of markup:
<a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse">
The data-target="" attribute is set to the id of #nav-to-collapse. So Bootstrap's collapse plugin is going to look for an id="nav-to-collapse" and trigger its function on that id.
So in this markup:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
The data-target is set to the class of .navbar-collapse, which will make everything underneath that element collapse.
Fixed the collapse animation issue by using min-height instead of height on the nav element. Here is a fiddle: http://jsfiddle.net/cfcZY/2/
nav { min-height: 100px; }
There are pull-right and pull-left classes to align block elements. I'm wondering if there is corresponding pull-top and pull-bottom workable for navbar?
<header id="navbar" role="banner" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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="logo pull-left" href="/" title="Home">
<img src="logo.png" alt="Home">
</a>
<div class="nav-collapse collapse">
<nav role="navigation">
<ul class="menu nav">
<li>...</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
To goal is to align the menu (ul.nav) to the bottom of navbar.
The answer to this really lies in the capabilities of CSS. .pull-right and .pull-left both apply a micro-clearfix and then float the element left or right in Twitter Bootstrap.
Creating .pull-top and .pull-bottom class' would not be feasible as the parent elements would need to have a position:relative applied, the element would then need man-handled around with top and bottom properties to have it placed properly. The alternatives would require the element to have a fixed height with negative margin applied to the top, of half the height and top:50% applied. Again this would need the parent to be position:relative.
As with any CSS framework, there are just some things you will have to do yourself :-(.
Im in the middle of migrating my project form Bootstrap 2.3.2 to Bootstrap 3.
I am unable to center the navbar links as I was able to before. I used this method previously: Center bootstrap's brand and list items but is not working for my new navbar.
The below link is a jsfiddle direclty using one of bootstraps examples (with the sticky footer and navbar)
Can someone please help me center these links?
http://jsfiddle.net/brainbolt/52VtD/4/
HTML
<div class="navbar navbar-default navbar-fixed-top center">
<div class="container">
<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>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services & Promos
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
CSS
.navbar-default > .container { text-align: center }
Thanks!
Refer this site, Paste your bootstrap 2.3.2 code in here, and click button showing 2.x>3.
This will migrate your code automatically to 3.0.
OR
Refer this, to get bootstrap documentation for migration.
Hope this helps.
I'm creating a Site using Twitter Bootstrap 2.0.4 + bootstraps responsive.css. What I don't know is: Is it possible to have a logo appearing at the top left of the site and the navbar appearing on the right of the logo (but fixed at top)? While changing Sizes, the Logo should then appear on top of the navbar.
Would be really nice to get an answer for I haven't found anything helpful yet.
Greetings,
Dominik
edit: Here's a picture describing what I want to achieve: http://i.imgur.com/HX3ZM.png
Logo on the left, then navbar.
Okay, I got it. I used the fixed navbar, which didn't work as expected. You have to use a static navbar. Then you could just use the row / scaffolding system from bootstrap.
Example code for a logo left from the navbar:
<div class="row-fluid">
<div class="span3">
<p><img src="/sites/img/your_logo.png" alt="Logo" class="responsive-logo"></p>
</div>
<div class="span9">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<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>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Profile</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div><!-- end navbar -->
</div><!-- end span8 -->
</div><!-- end row -->
To make my Logo responsive, I added the following css rules:
.responsive-logo {
max-width: 100%;
height: auto;
border: 0;
padding-top: 10px;
}
Yes, sure—you will need to re-structure your document to place (for example) a div with the span4 class above the navbar.
Below that, have the navbar code and remove the branding elements (which usually house your logo). My assumption leads me to believe you want something like this:
If you can be a bit more specific about what you want, and/or provide the relevant parts (HTML) of your site, I can likely give some more direction.
I'm trying to center the "content" on navbar. When it is "navbar-fixed-top" the UL menus are centered. However, since I don't want to fix the menu to the top I remove that class but now menus are not centered.
It is floating to the left side. It should be aligned to the margins of the container.
Similar as http://twitter.github.com/bootstrap/scaffolding.html but I don't want it to be fixed to the top.
This is the code
<div class="navbar ">
<div class="navbar-inner">
<div class="container" >
<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="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Use navbar-static-top.
Check out the latest bootstrap version if it doesn't work.
This used to be the default behaviour, at least it worked in 2.0.1, but it seems there has been some changes in the latest versions so that the navbar content is no longer centered when the navbar is not fixed.
The workaround seems to be to add the following to your CSS:
.navbar-inner > .container { width:940px; }