I was trying to center this: http://jsfiddle.net/MikeStardust/hwhS5/ navigation bar but no luck...
By center i mean the elements aligned in one single line in the center of the navigation...
looked up a few solutions but none worked, resulted in a center aligned navigation bar with one element per line.
Bar html: (css & html on the jsfiddle)
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Forums</li>
<li>Servers</li>
<li>Help Center</li>
<li>Vote</li>
<li>Donate</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.navbar
I have this:
And would like to have this:(Result from photoshop)
Try changing the display value of .navbar-nav to inline-block and then applying text-align on its parent to control alignment.
If you need to change the mobile view alignment you can re-apply text-align at that breakpoint.
.navbar-nav {
display: inline-block;
}
.navbar-default {
text-align: center;
}
Example: http://jsfiddle.net/hwhS5/2/
use bootstrap class="justify-content-center"
Related
Currently i am having this problem where i increased the padding on the bootstrap nav bar to make it bigger. I made the text bigger. My concern is that when i use the hover effect, it only covers the text and not the bigger area. Is there a way to sort of add padding on the hover effect? What is the best way i should approach this?
This is my html
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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-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>
<a class="navbar-brand" href="./">konek</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">
{% if current_user.is_authenticated %}
<li class="active">Timeline</li>
<li class="">My Profile</li>
<li class="">Update Account</li>
<li class="">Logout</li>
{% else %}
<li class="">Sign Up</li>
<li class="">Log In</li>
{% endif %}
</ul>
</div>
</div>
</nav>
You should add the :hover styles to the parent of the text, which should fill the Navbar.
The parent in this case should be the li tag. In Bootstrap, iirc, it should fill the Navbar by default.
Is the :hover css style applied to just tag element or the li. If the :hover styling is on the tag then change it be on the li like li:hover, if the hover effect is on the li then make sure the navbar is 100% of the parent and that the ul is also 100%. That way the hover will take the full height of the navbar rather than just the text.
ul {
height: 100%;
}
li {
height: 100%;
}
li:hover {
...hover-code
}
I'm new to bootstrap 3. At the moment I want to allign my navbar to the center. I did this with this approach, which works fine.
Now my Problem is that the width of my navbar-brand element affects the position of the centered stuff,e.g. the elements are moving to the left, if the branding gets bigger. Is there a way to position a element of the navbar at the "real" center of the screen?
It looks like that at the moment:
But I want at the real center of the screen like that, but with the brand:
My html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand navbar-left" href="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Services<span class="caret"></span>
<ul class="dropdown-menu">
<li>Stuff</li>
</ul>
</li>
<li>Karriere</li>
<li>Über uns</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
My CSS:
#media (min-width: $grid-float-breakpoint) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
Thanks for your help!
Making the root element of the navbarbrand have an absolute position seems to give the desired effect. This causes your nav links to be centered without regard to the navbarbrand element. NOTE: If your 'brand' text length gets too long, it will overlap the nav links. https://jsbin.com/juyanijeku/edit?output
.navbar-header {
position: absolute;
}
I've tried something like this
a.navbar-brand {
display: block;
float: none;
text-align: center !important;
}
.nav> li {
display:inline-block !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header text-center">
<a class="navbar-brand" href="#">
Brand
</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav text-center">
<li>Karriere</li>
<li>Über uns</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Having CSS/HTML issues with Bootstrap. For some reason it seems the navigation is not pushing down the aspects of the HTML that follows. See https://jsfiddle.net/xaazf6u2/
<div id="topNavigation">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand" href="#">BCF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">History <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>FGT</li>
<li>BB</li>
</ul>
</li>
</ul>
<ul id="login" class="nav navbar-nav navbar-right"></ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="pageContent" class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
</div>
</div>
From the examples you can see that the jumbotron should have some space below the navigation http://getbootstrap.com/examples/theme/
When you used the fixed navbar Bootstrap recommends you add padding to your body to prevent this problem. So in your CSS you need to add
body { padding-top: 70px; }
The navbar is position:fixed so that it stays on the screen as you scroll. Elements with fixed position don't affect layout of other elements, so you'll need to manually set margin or padding on them.
See the Bootstrap documentation for notes on this.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Copy
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
The class "navbar-fixed-top" means that the content is scrollable and goes under the navbar.
Add a margin-top to the content if you want to keep this feature or remove the "navbar-fixed-top" class if you don't.
Navigation bar is fixed to the top by default you can change that by removing the class 'navbar-fixed-top'.
hey guys i am basically new to css and trying to build a bootstrap navbar ,the issue is that i had to center certain contents of the navbar I.E , center the menu items .
basically after going through the source of the bootstrap navbar i figured out that the reason all elements in the navbar appear in one line rather then moving on to the next line is because the elements in the navbar are floated either right or left , the movement you remove the floats the alignment is broken ,
so what i tried to do is : - HTML code(TYPICAL bootstrap markup) :
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
</nav>
And the CSS(customized css) :
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
width: 300px;
}
.navbar-default .navbar-collapse ul.navbar-nav li {
float: none;
display: inline-block;
}
.brand-holder {
height: 200px;
background: #000;
}
.navbar-fixed {
position: fixed;
width: 100%;
}
The thing to notice is see how i have removed the floats in ul.navbar-nav and ul.navbar-nav li
Fiddle here . , now see how the contents of
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
is floated to the next line . is there anyway that i can have the contents back inline with the menu items ?
P.S. :: i would really like to avoid using absolute positioning .
Thank you.
Alex-z.
If my understanding of your question is correct, probably by changing the CSS as below
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
text-align:left;
and instead of keeping an another UL for the FB Logo keep the whole Li as in the first Ul itself and aligning to right, should help
so the final html will be
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand --> <!-- </div>-->
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li style="float:right"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
You can have a check on the result fiddle
Hope this helps.
Thanks,
Philemon
In Twitter bootstrap 2.3.2 I can have something like:
http://jsfiddle.net/aQwUZ/3/
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
BRAND
<ul class="nav pull-right">
<li>
Fixed Link
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>
</div>
</div>
A twitter bootstrap navbar, where in mobile responsive view, "Fixed Link" stay visible in header.
Now, in bootstrap 3, after upgrade my code, I can only have:
http://jsfiddle.net/EC3Ly/4/
<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-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BRAND</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
Fixed Link
</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>
</nav>
in mobile responsive view, I get 2 lines...
I tried to wrap in a "navbar-header" node http://jsfiddle.net/EC3Ly/5/ or in the first "navbar-header" without success.
What did I miss?
Thanks,
Alexandre
I faced the same problem with BS3, and the only way I found to resolve it was to use a combination of pull-left and pull-right
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">BRAND</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li>
Fixed Link
</li>
</ul>
<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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>
</nav>
Working demo: http://bootply.com/78856
The two lines in the mobile navbar are caused by the clearfix of the navbar-header:
.navbar-header {
.clearfix();
#media (min-width: #grid-float-breakpoint) {
float: left;
}
}
You could use media queries and css to undo this clearfix (and add a new before the collapsed dropdown)
.navbar-right {float: right !important;}
#media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }
.navbar-collapse:before {clear:both;}
.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}
.navbar{border-color: #101010; border-width: 0 0 1px;}
.navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}
}
demo: http://bootply.com/82366
The media queries also add a float right for the navbar-right on smaller screens. To take this code in production, you maybe will fix the borders and possible the navbar css transisions too.
The problem is with the point at which the navbar collapses. By default, Bootstrap collapses at 768px. If you increase this, your navbar will collapse sooner and your problem will disappear.
The best way to do this is to customize your bootstrap file and change the #grid-float-breakpoint to 850px (or whatever size you need). You can easily customize bootstrap 3 from http://getbootstrap.com/customize/?id=9720390
Hope this helps.
I fixed it this way. Just right after the brand add two new lines with the same class and an additional class.
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">Home</a>
<!-- Fake branding to avoid breaking up navbar -->
<a class="navbar-brand navbar-brand-fake">Item 1</a>
<a class="navbar-brand navbar-brand-fake">Item 2</a>
And add this to your css file:
a.navbar-brand-fake {
font-size: 15px;
line-height: 21px;
margin-left: 2px !important;
}
Home, Item 1 and Item 2 remain in the navbar when resizing and the navbar won't break.