CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
scriptmonkey
scriptmonkey

Reputation: 870

Twitter Bootstrap V 3.0 dynamically centering navigation

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.

Upvotes: 0

Views: 878

Answers (2)

lebolo
lebolo

Reputation: 2150

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.

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362300

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.

Upvotes: 0

Related Questions