48

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.

Community
  • 1
  • 1
josh
  • 9,656
  • 4
  • 34
  • 51

7 Answers7

66

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/

Nimantha
  • 6,405
  • 6
  • 28
  • 69
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • Would this work across multiple browsers? Unfortunately I might have to support IE 7 – josh Sep 29 '13 at 05:08
  • @David thanks, did you try it with .navbar-right? It seems like once you also have another .navbar-right your solution is pushing the .navbar-right downward. – Guy Korland Dec 03 '13 at 10:28
  • @GuyKorland, I haven't tried it with a navbar-right, though what you mention doesn't surprise me. Another approach might be more suitable in that case. If you want to start a jsFiddle I would be happy to play around with it for you ;) – David Taiaroa Dec 05 '13 at 20:40
  • 2
    @DavidTaiaroa, thanks for the offer :) in fact the solution was pretty simple, only switch the order between the different parts of the navbar, see http://jsfiddle.net/gkorland/AMeYh/1/ vs http://jsfiddle.net/gkorland/AMeYh/2/ – Guy Korland Dec 05 '13 at 23:12
  • Good going @GuyKorland, switching the order isn't something I would have thought of quickly ;) – David Taiaroa Dec 06 '13 at 02:18
  • 5
    If using `{less}` instead of pure CSS, I'd suggest using the `@screen-sm-min` variable instead of the hardcoded `768px`. – Zoltán Mar 15 '14 at 00:50
  • Thanks for saving life :-) – Hardik Sondagar May 27 '14 at 01:31
  • Hi @DavidTaiaroa Your code works well, but if I want to put search form on the same line, the form will put on the new line. – The Hung Jun 04 '15 at 07:21
  • @TheHung , do you want the search form centered along with your other menu links? – David Taiaroa Jun 04 '15 at 15:56
  • @DavidTaiaroa I mean that logo on the left side, menu in the center and search form on the right side. If you set `float: none`, search form will put on the new line. – The Hung Jun 04 '15 at 16:26
  • 1
    @TheHung, one possibility if you have space would be something like http://jsfiddle.net/panchroma/q3940bs5/ I'm sure there would be a cleaner flexbox option as well. Good luck ;) – David Taiaroa Jun 04 '15 at 20:32
  • @DavidTaiaroa Thank you so much. – The Hung Jun 05 '15 at 02:47
  • Instead of justifying this, how can we center the navbar? – JohnVanDijk Aug 15 '15 at 13:38
37

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;
    }
}
Adam Azad
  • 11,171
  • 5
  • 29
  • 70
Nico
  • 717
  • 8
  • 16
9

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.

josh
  • 9,656
  • 4
  • 34
  • 51
  • 2
    This stops the nav li elements being inline with bootstrap 3 - David's answer works better. – James Apr 29 '14 at 15:01
  • Where does this cause an issue? Both answers are good, in my opinion (although I'm biased because I wrote one) but they attempt to do different things... Look at my and David's jsfiddles. – josh Apr 30 '14 at 14:14
  • Okay I may have used your code incorrectly looking at your sample, however your question is about centring a nav bar rather than making it justified (quite different) and I would say David's answer is closer to that. – James May 01 '14 at 19:11
4

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

Nishanth
  • 47
  • 5
1
<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

Lynnais
  • 189
  • 1
  • 3
0

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;
    }
}
0

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>
Kagiso Nyokolodi
  • 1