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.
Related
I'm trying to create a webpage using bootstrap3 but have run into a problem in the navigation bar. I want the navigation links (there are 4 - "Web Design" "Development" "Photography" "Blog") to equally divide the space available in the horizontal navbar. At the min they are just piling up on the left. Here is a segment of the code - hopefully I haven't missed out an important bit. I have NOT amended the bootstrap CSS at all.
<div class="container-fluid">
<div class="row">
<!-- Navbar -->
<nav class="navbar navbar-default" role="navigation">
<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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active col-md-3">
Web Design
</li>
<li class="col-md-3">
Development
</li>
<li class="col-md-3">
Photography
</li>
<li class="col-md-3">
Blog
</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<h1>Hello World!</h1>
</div>
</div>
</div>
</div>
I forced a few changes in the bootstrap layout with a couple of css rules, see if this doesn't float your boat :)
http://jsbin.com/xeniwonujeti/1/
my css changes:
.nav { width: 100%;}
.nav li { width: 25%; text-align: center; }
Obviously this will limit dynamic menu changes and you'll have to change it if the amount of links changes.
I am using boot strap for my design.I have used nav bar for drop down purpose.when i try to iclude Logo,Signin/signup above this menu its not getting properly aligned.So when i used another nav bar it is getting alligned but lot of empty space between the two.
link
Here is the code:
<
nav class="navbar navbar-static">
<div class="navbar-header"> <img class="img-responsive col-md-4" src="final1.jpg">
<div > </div>
<div class="pull-right"> Sign In </div>
<div class="pull-right col-md-1"> Sign Up </div>
</div>
</nav>
<nav class="navbar navbar-default navbar-static">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large"> </li>
</ul>
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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="http://rewardsinn.com/home2.php">Home</a> </div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large"> Categories<b class="caret"></b>
<form class="navbar-form navbar-left" method="post" action="search.php">
<div class="form-group">
<input name="search" type="text" class="form-control" placeholder="Search for Store">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
body element on the site has margin-top: 50px and also padding-top: 50px remove it and you shall be fine.
But it's hard to say which file to edit since your styles' structure is completely messed up. Editing bootstrap.css wont help since there are other files that control looks of the body element. Like this misterious home2.php:605 in the Dev Tools which leads to some JS code.
And by the way, StackOverFlow is not the site where people are solving your code problems for free while you are paid for that. It is not about it at all. You are missing the point of the resource, just saying.
I am not sure what are you asking but if is for the space between the two navbar you can remove it by adding margin-button:0 to the navbar statics like this
in your css
.navbar.navbar-static {
margin-button:0
}
If you wanna remove the top space
body {
padding-top:0;
margin-top:0;
}
The navbar in bootstrap has a default margin-bottom of 20px. You need to change that to 0.
Give your top navbar with the logo a class
<nav class="navbar navbar-static no-margin">
....
</nav>
In your stylesheet
.no-margin{
margin-bottom: 0;
}
Hope this helps.
The links within my site's header/navigation aren't working for some reason. I think it has something to do with the CSS I am using but I have followed the code exactly like it is on Bootstrap's documentation site. Can someone help me fix this error?
You can view the full site here: http://kaybesee.com/mb
Here is my HTML:
<div id="nav-wrapper">
<nav class="navbar" role="navigation" data-spy="affix" data-offset-top="1000" data-offset-bottom="200">
<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="#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" href="#"><img src="img/logoTextRight.png" class="img-responsive"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-button">Portfolio</li>
<li class="nav-button">About Us</li>
<li class="nav-button">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div><!-- #nav-wrapper -->
Believe this is related, you have a e.preventDefault on your li click line 36 on your index. I don't really see a reason for that, but since your anchor is inside, the anchor click event never fires.
Remove e.preventDefault();
$('ul.nav > li').click(function (e) {
e.preventDefault();
You Should Match the Page ID with the Tab ID in the CSS . I think there is some bug with bootstrap nav class.
See this article for more information. http://webdesign.about.com/od/layout/a/aa042307.htm .
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.
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; }