Twitter Bootstrap V 3.0 dynamically centering navigation

Question

Using bootstrap v3.0

Id like to dynamically center the navigation bar. i.e. A fix that doesnt hardcode a width.

How is this achieved? Below is a sample of the standard navigation code with excess tags removed.

<!-- NAVBAR
================================================== -->
    <div class="navbar-wrapper">
        <div class="navbar navbar-inverse navbar-static-top">
            <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>
                    </button>
                    <a class="navbar-brand" href="#">All Saints Church, Ripley.</a>
                </div>
                <div class="navbar-collapse collapse" >
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<!-- ./NAVBAR -->

The documentation states to float the navbar right insert .navbar-right @<ul class="nav navbar-nav navbar-right"> ... shown here http://getbootstrap.com/components/#navbar-component-alignment.

Having followed the methodology of this question: twitter bootstrap -- center brand in nav bar I cannot centralize the navigation using margin-left: auto; and margin-right: auto;

Any help is greatly appreciated.

You want to center all of the navbar links, the entire navbar, or just the `brand`? — Carol Skelly, Dec 03 '13 at 21:04
I would like to know how to center the entire navbar but in this instance I only want to center the navbar links. — scriptmonkey, Dec 03 '13 at 21:07

score 1 · Accepted Answer · answered Dec 03 '13 at 21:51

1

For the record, I don't quite like this solution =) But a brute force way may be to add the following CSS:

.nav.navbar-nav {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

and the following jQuery to force the width down from the auto that is being inherited from .container:

var width = 0, $navbarLinks = $(".nav.navbar-nav");

$navbarLinks.children().each( function(idx) {
    width += $(this).outerWidth();
});

$navbarLinks.width(width);

See the jsFiddle for testing.

answered Dec 03 '13 at 21:51

lebolo

2,120
4
29
44

This works very nicely @lebolo - thank you :D The only issue, on mobile devices it causes the carat to be placed under the dropdown menu and causes the 'active' highlighting to not fully span the active element. – scriptmonkey Dec 03 '13 at 22:23

score 0 · Answer 2 · answered Dec 03 '13 at 21:39

0

I have found it easiest to use the nav-justified class for this purpose..

<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 nav-justified">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Demo

You can also constrain the width using an extra class. See the 2nd navbar in the demo.

answered Dec 03 '13 at 21:39

Carol Skelly

351,302
90
710
624

Brilliant. Its exactly what i asked for so thank you very much for that @Skelly. The trade off against not having navbar-nav in the code makes the solution untenable for myself. I've sifted through the CSS and found: `.navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; }` `.navbar-nav.pull-right > li > .dropdown-menu, .navbar-nav > li > .dropdown-menu.pull-right { right: 0; left: auto; } `.navbar-collapse .navbar-nav.navbar-left:first-child { margin-left: -15px; }` appear to be the only positioning css styles. – scriptmonkey Dec 03 '13 at 22:00
all of the above css styles i got from bootstrap.css. I'm trying to understand why i cant retain the color, padding, margin settings and remove any styles that might affect positioning. so far everything ive tried just winds up in a mess. – scriptmonkey Dec 03 '13 at 22:05
Yeah, it seems like the BS classes are geared towards left/right nav links, but not centered links. I don't know why. – Carol Skelly Dec 03 '13 at 22:07
Must be a an issue they've chosen to leave for now. I dont believe its an oversight and they didn't anticipate people wanting centered navbar links. – scriptmonkey Dec 03 '13 at 22:30

Twitter Bootstrap V 3.0 dynamically centering navigation

2 Answers2

Demo