Bootstrap navbar centre links and right align others

Question

I have a navbar in bootstrap and I'm trying to centre some links and have another link pull to the right of the page. I've added the navbar-right class but it doesn't seem to have any effect.

nav.navbar.navbar-default.navbar-fixed-top
  .container
    .navbar-header
      button.navbar-toggle[type="button" data-toggle="collapse" data-target=".navbar-collapse"]
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      = link_to root_path,class: 'navbar-brand' do
        .img-responsive
          =image_tag "logowhite2.png"
    .collapse.navbar-collapse
      # this part should be centered
      ul.nav.navbar-nav
        li#fat-menu.dropdown.text-center
          a.dropdown-toggle data-toggle="dropdown" href="#"
            | Users
            b.caret
          ul.dropdown-menu
            li = link_to 'Clients', clients_path
            li = link_to 'Trainers', trainers_path
            li = link_to 'Admins', admins_path
            li = link_to 'Companies', companies_path
        li = link_to 'Bookings', bookings_path
        li = link_to 'New Booking', book_user_path
        li = link_to 'Courses', courses_path

        # this part should pull to the right
        - if user_signed_in?
          ul.nav.navbar-nav.navbar-right
            li#fat-menu.dropdown
              a.dropdown-toggle data-toggle="dropdown" href="#"
                =current_user.name.capitalize
                b.caret
              ul.dropdown-menu
                li = link_to 'Sign out', destroy_user_session_path, :method=>'delete'
        - else
          li = link_to 'Sign in', new_user_session_path

What am I doing wrong here?

Answer 1

You've just indented too far. You don't want for one navbar to actually be inside of another one. You want them side by side I think.

It looks like its just from the if statement

nav.navbar.navbar-default.navbar-fixed-top
  .container
    .navbar-header
      button.navbar-toggle[type="button" data-toggle="collapse" data-target=".navbar-collapse"]
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      = link_to root_path,class: 'navbar-brand' do
        .img-responsive
          =image_tag "logowhite2.png"
    .collapse.navbar-collapse
      # this part should be centered
      ul.nav.navbar-nav
        li#fat-menu.dropdown.text-center
          a.dropdown-toggle data-toggle="dropdown" href="#"
            | Users
            b.caret
          ul.dropdown-menu
            li = link_to 'Clients', clients_path
            li = link_to 'Trainers', trainers_path
            li = link_to 'Admins', admins_path
            li = link_to 'Companies', companies_path
        li = link_to 'Bookings', bookings_path
        li = link_to 'New Booking', book_user_path
        li = link_to 'Courses', courses_path

      # this part should pull to the right
      - if user_signed_in?
        ul.nav.navbar-nav.navbar-right
          li#fat-menu.dropdown
            a.dropdown-toggle data-toggle="dropdown" href="#"
              =current_user.name.capitalize
              b.caret
            ul.dropdown-menu
              li = link_to 'Sign out', destroy_user_session_path, :method=>'delete'
      - else
        li = link_to 'Sign in', new_user_session_path

Update - Centering the main nav

.nav.navbar.navbar-default.navbar-fixed-top
  .container
    .col-sm-2
      .navbar-header
        button.navbar-toggle{type:"button", "data-toggle"=>"collapse","data-target"=>".navbar-collapse"}
          span.sr-only Toggle navigation
          span.icon-bar
          span.icon-bar
          span.icon-bar
        = link_to root_path,class: 'navbar-brand' do
          .img-responsive
            =image_tag "logowhite2.png"
    .col-sm-10
      .collapse.navbar-collapse
        .row
          .col-sm-9
            ul.nav.navbar-nav
              li#fat-menu.dropdown.text-center
                a.dropdown-toggle{"data-toggle"=>"dropdown", href:"#"}
                  | Users
                  b.caret
                ul.dropdown-menu
                  li = link_to 'Clients', clients_path
                  li = link_to 'Trainers', trainers_path
                  li = link_to 'Admins', admins_path
                  li = link_to 'Companies', companies_path
              li = link_to 'Bookings', bookings_path
              li = link_to 'New Booking', book_user_path
              li = link_to 'Courses', courses_path

          - if user_signed_in?
            .col-sm-3
              ul.nav.navbar-nav
                li#fat-menu.dropdown
                  a.dropdown-toggle{"data-toggle"=>"dropdown",href:"#"}
                    =current_user.name.capitalize
                    b.caret
                  ul.dropdown-menu
                    li= link_to 'Sign out', destroy_user_session_path, :method=>'delete'
          - else
            .col-sm-3
              ul.nav.navbar-nav
                li= link_to 'Sign in', new_user_session_path

Basically the difference is that your use bootstrap's grid to set a width for the logo and then for the nav, then inside the nav section, since you have 2 of them, you'll again use a grid position for each of those 2 nav bars.

Then you'll need a little css to override the natural behavior of floating nav li to the left.

  .navbar-collapse .col-sm-9 ul.navbar-nav { text-align: center; width: 100%;}
  .navbar-collapse .col-sm-9 ul.navbar-nav li { float: none; display: inline-block;}