I searched around and used all the solutions that worked for others - but unfortunately not for me.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Menu</li>
</ul>
</div><!-- container -->
</div><!-- navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
CSS things i've added
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner {
text-align:center;
}
have you tried this -
.navbar {
margin: 0 auto;
width: 200px;
}
Related
I'm looking for handle my Bootstrap navbar title and I don't overcome to center my tag.
My script for this part looks like :
<style>
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: inline-block;
text-align:center;
float: none;
vertical-align: top;
}
</style>
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<a class="navbar-brand"> Choix du logiciel </a>
</div>
</div>
</div>
</div>
</nav>
I would like to center : Choix du logiciel
I already read this post : Center content in responsive bootstrap navbar
But I don't find a way to make what I want :/
I think that it's not hard, but up to now it's not a success.
Thank you
EDIT : It should work with this fiddle
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: block;
text-align:center;
float: none;
vertical-align: top;
}
.navbar.navbar-inverse .navbar-header{
float: none;
}
Use this css:
.navbar.navbar-inverse .navbar-header {
text-align: center;
width: 100%;
}
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: inline-block;
float: none;
}
Change inline block to just block.
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: block;
text-align: center;
float: none;
vertical-align: top;
}
take text-align: center; out from your css .navbar.navbar-inverse.navbar-header.navbar-brand {..} and move it to
.navbar-header {
text-align: center;
}
will fix it.
.navbar.navbar-inverse.navbar-header.navbar-brand {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-header {
text-align: center;
}
.bg-red {
background-color: red;
}
.bg-yellow {
background-color: yellow;
}
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<div class="wraper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header bg-yellow">
<a class="navbar-brand bg-red"> Choix du logiciel </a>
</div>
</div>
</div>
</div>
</nav>
</div>
Just put text-align:center on .navbar-header. It must work.
Your a tag must be display block so your text inside tag can be centered.
You can put display:block on a tag too.
Adding display:inline-block to .navbar-brand may fix it.
And also text-align:center to .navbar-header
Check this and see please
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: block;
text-align: center;
float: none;
vertical-align: top;
}
This is now possible with inbuilt bootstrap class '.justify-content-center', but will be applicable on bootstrap versions v4.4 and above
Can be applied to a nav component like below
<nav className="navbar navbar-light bg-light justify-content-center">
<span className="navbar-brand mb-0 h1">Navbar</span>
</nav>
I have a layout using a fixed navbar and sticky footer. In the main body, I have a fluid container with a column aligned to the left. I want that column to vertically fill the main body (between the navbar and footer), however I can't get it to work. I've tried all the examples I can find, to no avail.
I've build this JSFiddle to show what I have so far.
This is what I'm hoping to achieve:
My HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 ">
<div class="main-content">
<h1>Hello world.</h1>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
Sticky footer based on Boostrap example.
</div>
</footer>
And my CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #999999;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container-fluid {
padding-top: 50px;
}
.container-fluid .col-sm-6 {
padding: 0;
}
.navbar {
margin-bottom: 0;
}
.footer {
padding: 15px 0;
}
.main-content {
background: #efefef;
padding: 20px;
height: 100%;
min-height: 100%;
}
You can use height:calc(100vh - 110px); on the .main-content div. The 110px is the height of the footer + height of the header which is subtracted from the viewport height.
http://www.bootply.com/v8XITHB4fP
I'm struggling with the alignment in the following navbar that uses Bootstrap 3.
Problem: The Login and Signup elements are on different rows. Whats the correct way to adjust them so that they are both on the same line? display: inline-block; and white-space: nowrap; does not appear to work on the li elements.
Note that the input element should fill up the space between the logo and the Login/Signup elements.
Bootply: http://www.bootply.com/Bh5TBV9vS0
<nav class="navbar navbar-default navbar-fixed-top">
HTML
<a class="brand" href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" width="100">
</a>
<form role="form" class="form-horizontal search-form">
<!-- <i class="fa fa-search"></i> -->
<input type="text" class="form-control" placeholder="Search">
</form>
<ul class="nav navbar-nav">
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
CSS:
.brand {
width: 170px;
height: 80px;
background-color: #ccc;
display: inline-block
}
.navbar.transparent.navbar-inverse .navbar-inner {
background: rgba(0,0,0,0.4);
}
.search-form {
width: 100%;
height: 30px;
display: inline-block;
}
.search-form {
margin-top:10px;
padding: 0 10px;
}
nav { display: flex; }
Remove float:left for your list items and apply dispaly:inline-block and apply the style white-space:nowrap for your ul element.
ul.navbar-nav{ white-space:nowrap;}
.navbar-nav li{display:inline-block; float:none;}
I have updated width of .search-form from 100% to 76% and now it works fine.
Check here
I need to modify the dropdown-menu provided in Bootstrap, using the navbar-fixed-top, to appear on hover not vertically but horizontally li { display: inline-block } (that's easy), but so I need the actual ul.dropdown-menu to stretch the full width of the page. I can't seem to figure it out.
Don't give me a megamenu plugin or anything, please, just how can I fix it to stretch the width of the whole page? (not the page container either, the window)
Will probably need to wrap another element too, actually, as the ul needs to be centered.
So does anyone know how to do this?
EDIT: Figured it out (like 5 minutes after posting this) and with no added elements:
.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }
and there you have it!
First you shouldn't wrap the navbar component in a div.container then update the css with the following Code:
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
display: table-cell;
}
check the demo here http://www.bootply.com/8EgGsi4F7w
<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">
just use the position: initial in the main li(dropdown) of your nav and in the child ul dropdown-menu set width 100%
Here the alternative that worked for me.
I just tried option 2. The key is:
Adding class position-static along with (the) dropdown class, which is the parent class of dropdown-menu as follows:
<li class="nav-item dropdown position-static">
Credit to its author: VigneshKannan3 from GeeksforGeeks
It looks like this answer to a similar question has the same approach.
Check this
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display: table;
border-radius: 0px;
width: 100%;
text-align: center;
left: 0;
right: 0;
}
.dropdown-menu > li {
display: table-cell;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#media screen and (max-width: 767px) {
.dropdown-menu > li {
display: block;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">Blackcat</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Shop</li>
<li class="dropdown">
Artist <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Rich</li>
<li>Shay</li>
<li>Jose</li>
<li>Marie</li>
<li>Simon</li>
<li>Jamie</li>
<li>Andrew</li>
<li>Teddie</li>
</ul>
</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->
<!-- container -->
<div class="container">
<div class="row">
<p>Site content here...</p>
</div>
<!-- End row -->
</div>
<!-- End container -->
I've implemented the solution here which almost solves my problem, however, I need the <ul class="nav"> to be centered between the entire navbar and not just the elements adjacent to it (<a class="brand"> and <p class="navbar-text pull-right"> in my case).
Important: I customized my navbar to be 96px instead of the default 40px, and I want the <ul class="nav"> to appear centered and "underneath" the other elements as it will have its own background-color etc.
Here is my code so far:
<div class="navbar navbar-inverse navbar-fixed-top center">
<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="/home"><img src="http://jayeshcp.files.wordpress.com/2013/03/twitter-bootstrap.jpg" style="width:400px;height:60px;" /></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p class="navbar-text pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Note the extra center class that I added - that is from the solution that I linked to. It looks like this:
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
.center .dropdown-menu {
text-align: left;
}
How do I center the ul and give it padding above without breaking everything else in Bootstrap? Would offer more than bounty if there was another currency!
edit: jsfiddle is here (I pasted the whole minified css file (with the customized navbar height) instead of referencing it, sorry. Underneath it are the other customizations.)
p.navbar-text
{
float: none;
position: relative;
text-align: right;
}
.navbar .nav
{
display:block !important;
float: right !important;
width: 100%;
}
jsfiddle: http://jsfiddle.net/C7LWm/103/
Here's the solution for placing it underneath instead of below:
.navbar .nav
{
position: absolute;
left:0;
right:0;
width: 100%;
background-color:yellow;
}
p.navbar-text
{
width: 440px;
text-align:right;
position:relative;
z-index:2
}
.navbar .brand
{
position: relative;
z-index:2;
padding: 0;
width: 30%;
height: 60px;
background-image: url('http://placehold.it/400x60&text=Your Logo Here');
background-repeat: no-repeat; background-size: contain;
margin: 18px 0;
background-position: center left
}
.navbar .brand img
{
display:none;
}
Jsfiddle: http://jsfiddle.net/C7LWm/109/