CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap
locoboy
locoboy

Reputation: 38960

Move the mobile bootstrap links to the right side

By default the links in the dropdown for the mobile container are on the left (as shown below):

enter image description here

Is there a way to get them to show up on the right and not the left? I tried using text-align:right; but it's not showing up clean:

enter image description here

Upvotes: 2

Views: 427

Answers (2)

Tsvetelina Borisova
Tsvetelina Borisova

Reputation: 417

From Bootstrap documentation: http://getbootstrap.com/components/#navbar

You have to use these classes "navbar-form navbar-left

I used them like that:

<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="span10"></span>
    </button>
    <%= link_to 'Home', root_path, class: 'navbar-brand' %>
   </div>
   <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
     <%= render 'layouts/navigation_links' %>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
      <% if user_signed_in? %>
        <li><%= link_to 'Sign out', destroy_user_session_path, :method => :delete %></li>
      <% else %>
        <li><%= link_to 'Sing in', new_user_session_path %>     </li>
       <% end %>
     </ul>
   </div>
   </div>

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75399

You can create your own class, for example .align-right and add it to the .nav-collapse container to align the links to the right. This way your changes won't affect the other elements that rely on that class on the bootstrap stylsheet. Try this:

.nav-collapse.align-right {
    text-align:right;
}

Then you can do this:

<div class="nav-collapse align-right"> ..links.. </div>

And your links will be placed on the right side instead.

Demo: http://jsfiddle.net/PWFSX/

Upvotes: 1

Related Questions