How to center Bootstrap navigation items - html

I can't seem to figure out how to center the navigation items. I can place them either to the left or right but not center. Is there a simple work around?
<!-- Navigation -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Mobile navigation button -->
<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>
<!-- Navigation items -->
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>OUR PRODUCTS</li>
<li class="active">ABOUT</li>
<li>OUR TEAM</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
I've tried a few things but they're a little sloppy and caused some issues with mobile version. I'm looking for something a little more proper.

1) Use <ul class="nav nav-justified"... for the menu container.
2) Look at this codepen source:
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li
{
float: none;
display: inline-block;
}
3) Read the answer right there
There are three different ways to do something like You want, choose one.
You could easily find your answer, please try to do this alone next time, bro.

I believe you forgot to add or edit.
On your Bootstrap.css go find this class and edit on text-align:center. This will make your text navbar be centerized.
.navbar.navbar-collapse{
text-align: center;
}
If you still don't get it. You can take a look my example that i do on Bootply.
HTML
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>OUR PRODUCTS</li>
<li class="active">ABOUT</li>
<li>OUR TEAM</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
CSS
#media (min-width: 620px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
}
DEMO

You could also use some custom CSS via flexbox.
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
float: none; // overwrites Bootstrap's float value
}

Try this one
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li
{
float: none;
display: inline-block;
}
.navbar-nav > li a{
text-decoration:none;
padding-left:15px;
}

Related

Change bootstrap menu according to page width

I'm developing a web application and I put in my application the bootstrap menu I would like when the application reaches the maximum width of max-width: 770px the menu would be the same as the menu that is in the normal width of the page.
But when giving the display none in the menu navbar-header it does not exit and the menu nav navbar-nav does not appear in the maximum width of the page of 770px
Menu in the normal width of the page
Menu at the maximum width of 770px
<div class="body-wrap" >
<nav class="navbar navbar-inverse" role="navigation" id="azul">
<div class="container-fluid">
<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>
<a class="navbar-brand" ></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="conteudo"><li>Pagina Principal</li></div>
<div class="conteudo"> <li>Contato</li></div>
<li class="dropdown">
<div class="conteudo"> Produtos <b class="caret"></b></div>
<ul class="dropdown-menu">
<li>Camisetas</li>
<li class="divider"></li>
<li>Calças</li>
<li class="divider"></li>
<li>Bermudas</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS
#media (max-width: 770px) {
body{
background-color: yellow;
}
.navbar-header{
display: none;
}
.nav .navbar-nav{
display: inline;
}
}
I am not sure If I got what you mean but if you want to disable navbar-collapse you can simply add this CSS:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
Fiddle here
You can simply remove:
the button in element with class "navbar-header"
remove css classes "collapse navbar-collapse"
In this way the button disappear and you don't need to add extra css rules.
The main bar will remain visible with all widths.

Center li elements with ul

I have li elements in a nav menu, and I want to center the elements in the ul. I know this question has been asked many times, but I have tried almost everything and still cannot get it to work the way I would like. Here's the relevant portion of the code:
<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">
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav"id="nav">
<li class="active">Home</li>
<li>Login</li>
<li>Registration</li>
</ul>
</div>
</div>
</nav>
Here's the HTML for the whole homepage
add this css code
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}

Bootstrap Nav logo issue

This should be simple, but I am missing something.
I've added in a new navbar to a bootstrap site, this looks like this
http://codepen.io/davidcochran/pen/Dihnl
However when I actually implement this into my bootstrap site it refuses to center.
<header role="banner" id="logo-main1"><div id="everything">
<img id="logo-main1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo">
<nav id="navbar-primary" 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-primary-collapse">
<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="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" --></div>
CSS
.header[role="banner"] {
#logo-main {
display: block;
margin: 20px auto;
}
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
.navbar-nav {
width: 100%;
text-align: center;
> li {
display: inline-block;
float: none;
> a {
padding-left: 30px;
padding-right: 30px;
}
}
}
}
.logo-main1 {
text-align: center
}
it looks like this:
!!! Link removed until further inspection !!!
Another css deceleration is probably overriding the selector and deceleration (below) which centers your navbar.
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;

removing floats from bootstrap navbar without affecting layout

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

Navbar links surrounding centered brand

I have an idea and not sure how to get it to work.
I have a bootstrap navbar on my site that has links and a "brand". The brand is centered within the navbar using this modification. Bootply
Instead of setting the navbar up like this:
{ (link)(link)(link)(....bunch of empty space....)(BRAND)(....bunch of empty space....)(link)(link)(link) }
I would like the navbar to set up like the diagram bellow.
{ (....bunch of empty space....) (link)(link)(link)(BRAND)(link)(link)(link) (....bunch of empty space....) }
I am very new to coding so please give me some time on the response to any questions you may have.
Thanks!
Just add padding to the left of the first link.
<nav class="navbar navbar-default" role="navigation">
<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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Center 1</li>
<li>BRAND</li>
<li>Center 3</li>
</ul>
</div>
</nav>
CSS
#media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
Fiddle
http://jsfiddle.net/52VtD/9483/