Bootstrap: How to create additional menu items in navbar-collapse

Question

I am trying to create a custom navbar in Bootstrap.

I'd like to implement four things:

1. Right align of the nav links

2. Text center-align of the nav links when navbar expanded

3. Text right-align of the nav links when navbar collapsed

4. (this is the hard part) Additional nav links that are shown when the navbar is collapsed but not shown when expanded.

---

<div class="navbar">
    <div class="navbar-inner">
        <div class="ps-content">
            <button type="button" class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="brand">Navigation</div>
            <!-- PS RHS menu items -->
            <div class="visible-tablet pull-right">
                <ul class="nav">
                    <li class="active"><a href="#link_1">Active link</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#link_2">Second link</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#link_3">Third link</a></li>
                </ul>
            </div>
            <div class="nav-collapse pull-right ">
                <ul class="nav pull-right ">
                    <li class="active"><a href="#link_1">Actives link</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#link_2">Second link</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#link_3">Third link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

jsFiddle here: http://jsfiddle.net/robmc/M43fK/4/

I've successfully achieved 1 and 2, and am sure there's some simple CSS markup I am missing for 3, but it's point 4 that I am stumped on. I haven't seen this tried anywhere else. Any ideas?

Thanks

Answer 1

For question 3, you could use <li class="text-right">.

And for question 4 (a link that only displays when the navbar is collapsed) there are several different approaches. One way is to use the hidden-desktop hidden-tablet classes (since you're already using visible-*)

<ul class="nav hidden-desktop hidden-tablet">
  <li><a href="#link_1">Collapsed link</a></li>
</ul> 

Bootply Demo

Edit - Bootstrap 3 updated the three class names, depending on the size you wish to hide: .hidden-sm, .hidden-md, .hidden-lg

Edit(2) - Bootstrap 4 .hidden-* classes have changed to display classes