CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
a.real.human.being
a.real.human.being

Reputation: 888

Change layout spacing in bootstrap 3 navigation menu

I've got a full-width navigation menu right above my bootstrap3 container div (which maxes out at 1170).

<div class="navbar navbar-default">
    <!-- menu -->
</div>

<div class='container'>
    <!-- content -->
</div>

You can see the sample here: http://jsfiddle.net/xrXt2/show/. Everything is working as it's supposed to. However, I want to change the layout of the navigation menu and I have no idea how to go about this. I still want the navigation menu to stretch across the entire width, but the text inside it should be moved (once it shrinks down into the single icon button for the menu, it looks fine and it can remain as is). Ideally, when the menu options are still expanded, I'd like to change two things:

(1) The left edge of "sitename" should be aligned with the left edge of the container.

(2) The right edge of "help" should be aligned with the right edge of the container.

I'm guessing that, for those who know what they're doing in terms of modifying bootstrap's css, this is a relatively easy task. Unfortunately, I am truly lost as to where to begin.

In summary, here is how it looks now:

original

And here is how I'd like it to look:

desired

As mentioned, this is the default layout when the width shrinks to the size of the container, and I have no interest in changing this behaviour:

shrunk

Upvotes: 2

Views: 325

Answers (2)

Morgan ARR Allen
Morgan ARR Allen

Reputation: 10678

Wrap the navbar in a .container div and add .nav-right to the .nav

Updated to reflect documentation specifying not to use .pull-* on navbars.

Here is an updated example. http://jsfiddle.net/xrXt2/2/show/

<div class="navbar navbar-default">
    <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>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand navigate" href="#">sitename</a>
    </div>

        <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">action</a></li>
                <li><a href="#">sync</a></li>
                <li><a href="#">help</a></li>
        </ul>

        </div><!--/nav-collapse -->
    </div>
</div> <!-- /static navbar -->

Upvotes: 3

A.L
A.L

Reputation: 10503

Morgan ARR Allen already answered but the navbar-right class should be used in order to align a part of the menu to the right, this class is used in an example provided by bootstrap itself. Plus the bootstrap documentation shows a warning about using .pull-right:

Not for use in navbars

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

So the code is:

<div class="navbar navbar-default">
  <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>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand navigate" href="#">sitename</a>
    </div>

    <div class="navbar-collapse collapse">

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">action</a></li>
            <li><a href="#">sync</a></li>
            <li><a href="#">help</a></li>
        </ul>

    </div><!--/nav-collapse -->
  <div class="container">
</div> <!-- /static navbar -->

jsfiddle

Update: as seen is the source code, pull-right and navbar-right use different rules.

Update2: added quote from bootstrap documentation.

Upvotes: 1

Related Questions