CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3navbar
josh
josh

Reputation: 10338

How to justify navbar-nav in Bootstrap 3

I'm attempting to justify a navbar (make the navbar contents stretch) in Bootstrap 3. I've added margin: 0 auto; max-width: 1000px; to the nav* classes, and also attempted to add a container element as a parent to the ul. As a last check, I did what was suggested in this answer by adding navbar-justified to the navbar class, but this caused everything to scrunch together on the left without justifying the entire navbar.

Doing a nav nav-justified ul does make the ul center, but it doesn't retain the styles of the navbar-nav class since it's not part of the ul, and it doesn't look great when the screen is smaller than 768px.

How do I justify a Bootstrap 3 navbar?

Edit: For those who are interested in a more complete answer, here is some code I use in production:

// Stylesheet
.navbar-nav>li {
  float: none;
}

// Navbar
<nav class="navbar navbar-default">
  <ul class="nav nav-justified navbar-nav">
    <li><a href="/">Home</a></li>
    <li><a href="group.html">Group</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="positions.html">Positions</a></li>
  </ul>
</nav>

And here is a working jsFiddle. You may have to stretch the size of the result box for it to show correctly. If you're interested in centering the actual list without the nav stretching to full width, see David Taiaroa's jsFiddle.

Upvotes: 48

Views: 111093

Answers (7)

David Taiaroa
David Taiaroa

Reputation: 25495

You can justify the navbar contents by using:

@media (min-width: 768px){
  .navbar-nav{
     margin: 0 auto;
     display: table;
     table-layout: fixed;
     float: none;
  }
}

See this live: http://jsfiddle.net/panchroma/2fntE/

Upvotes: 67

Kagiso Nyokolodi
Kagiso Nyokolodi

Reputation: 1

Hi you can use this below code for working justified nav

<div class="navbar navbar-inverse">
    <ul class="navbar-nav nav nav-justified">
        <li class="active"><a href="#">Inicio</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
 </div>

Upvotes: 0

user7558471
user7558471

Reputation:

I know this is an old post but I would like share my solution. I spent several hours trying to make a justified navigation menu. You do not really need to modify anything in bootstrap css. Just need to add the correct class in the html.

   <nav class="nav navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-1" aria-expanded="false">
                <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="#top">Brand Name</a>
        </div>
        <div class="collapse navbar-collapse" id="collapsable-1">
            <ul class="nav nav-justified">
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact-me">Contact Me</a></li>
            </ul>
        </div>
    </nav>

This CSS code will simply remove the navbar-brand class when the screen reaches 768px.

media@(min-width: 768px){
   .navbar-brand{
        display: none;
    }
}

Upvotes: 0

Nishanth
Nishanth

Reputation: 47

Here is a more easy solution. just remove the "navbar-nav" class and add "nav-justified".

Upvotes: 4

Nico
Nico

Reputation: 717

To justify the bootstrap 3 navbar-nav justify menu to 100% width you can use this code:

@media (min-width: 768px){
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
    }
    .navbar-nav>li {
        display: table-cell;
        float: none;
        text-align: center;
    }
}

Upvotes: 37

Lynnais
Lynnais

Reputation: 189

<div class="navbar navbar-default 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="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">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>  
  </ul>
</div>

and for the css

@media ( min-width: 768px ) { 
    .navbar > .container {
        text-align: center;
    }
    .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    .collapse.navbar-collapse {
        width: auto;
        clear: none;
    }
}

see it live http://www.bootply.com/103172

Upvotes: 1

josh
josh

Reputation: 10338

It turns out that there is a float: left property by default on all navbar-nav>li elements, which is why they were all scrunching up to the left. Once I added the code below, it made the navbar both centered and not scrunched up.

.navbar-nav>li {
        float: none;
}

Hope this helps someone else who's looking to center a navbar.

Upvotes: 9

Related Questions