A Pen by Daniel W. Crompton.

index.haml

%html
  %head
  %body
    %div(class='navbar navbar-fixed-top navbar-inverse')
      .container
        .navbar-header
          %a.cart.pull-right(href='/' class='btn active btn-danger navbar-toggle')
            %div
              %span(class='glyphicon glyphicon-shopping-cart')>
              %i.cartcount 0
          %button.float-right(type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse')
            %span(class='icon-bar')
            %span(class='icon-bar')       
            %span(class='icon-bar')   
          %a.float-left(href='/')
            .logo
        .navbar-collapse(class='collapse')
          %ul(class='btn-group nav navbar-nav nav-bar-browse')
            %li(class='dropdown')
              %button(class='btn dropdown-toggle' type='button' id='dropdownMenu1' data-toggle='dropdown')
                %div
                  %span Browse 
                  %span(class='caret')>
              %ul(class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu1')
                %li(role='presentation')
                  %a(role='menuitem' tabindex='-1' href='/courses') By Course
                %li(role='presentation')
                  %a(role='menuitem' tabindex='-1' href='/teachers') By Instructor
            %li
              %a(href='/')
                %div About
            %li
              %a(href='/')
                %div Canvas
          %ul.pull-right(class='btn-group nav navbar-nav nav-bar-browse')
            %li
              %a.login(href='/' class='btn active btn-primary')
                %div Sign In
              %a.login(href='/' class='btn active btn-danger' style='display:none;')
                %div Sign Out
          %ul.pull-right(class='btn-group nav navbar-nav nav-bar-browse')
            %li
              %a.cart(href='/' class='btn active btn-danger navbar-toggle hidden-xs')
                %div
                  %span(class='glyphicon glyphicon-shopping-cart')>
                  %i.cartcount 0
    .container
      .row-fluid
        %a.btn.btn-primary.top10
          %div
            Sign In
        %a.btn.btn-info.top10
          %div
            Sign Up
      .row-fluid.top10
        %a.btn.btn-default.top10
          %div
            Forgot your password? 
      .row-fluid
        %a.btn.btn-default.top10
          %div
            Didn't receive confirmation instructions?
        %a.btn.btn-default.top10
          %div
            Didn't receive unlock instructions?

Oplerno-SignIn-Devise-Page.markdown

Oplerno SignIn Devise Page

A Pen by Daniel W. Crompton on CodePen.

License.

script.coffee

hidebar = ->
  console.log 'hide navbar'  
  $('.navbar').toggle 'blind', ->
    
$('#hidebar').click hidebar

loggedin = ->
  console.log 'loggedin'
  $('.login').toggle 0, -> 
    
$('#loggedin').click loggedin

style.scss

@import "compass/css3";

.nav>li{
   float: left;  
}
.nav-bar-browse {
  margin-top: 0;
}
.login, li a.cart {
  margin-right: 20px;
  margin-top:10px;
  width: 99px;
  height: 22px;  
  color: #fff !important;
  div {
    margin-top: -10px;
  }
}
.navbar-header .cart {
  margin-right: 20px;
  height: 34px;
  margin-top: 8px;
  border: 1px;
}