header

<nav class="[ navbar navbar-fixed-top ][ navbar-bootsnipp animate ]" role="navigation">
    <div class="[ container ]">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="[ navbar-header ]">
        <button type="button" class="[ pull-left navbar-toggle ]" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="[ sr-only ]">Toggle navigation</span>
          <span class="[ icon-bar ]"></span>
          <span class="[ icon-bar ]"></span>
          <span class="[ icon-bar ]"></span>
        </button>
        <div class="[ animbrand ]">
          <%= link_to "#{image_tag 'header/logo_site.png', :alt => 'IME – Instituto de Matemática e Estatística UERJ', :class => "style_image"}".html_safe, root_path %>
        </div>
      </div>

      <div class="[ collapse navbar-collapse ]" id="bs-example-navbar-collapse-1">
        <ul class="[ nav navbar-nav navbar-right ]">
        <li class="[ hidden-xs ]"><a href="#toggle-search" class="[ animate ]"><span class="[ glyphicon glyphicon-search ]"></span></a></li>
          <li class="[ hidden-xs ]">
            <% if locale == :en %>
              <%= link_to flag_icon(:br), locale: 'ptbr' %>
            <% else %>
              <%= link_to flag_icon(:us), locale: 'en' %>
            <% end %></li>
          <li class="[ hidden-xs ]">
            <% if user_signed_in? %>
                  <li class="round-image-50"><%= image_tag(avatar_url(current_user))%>
                  <li class="dropdown"><%= link_to t('.bem_vindo') + current_user.fullname  %>
                    <ul class="dropdown-menu">
                      <li><%= link_to t('.trocar_senha'), edit_user_registration_path %></li>
                        <% if current_user.admin? %>
                            <li><%= link_to t('.administrador'), rails_admin_path %></li>
                            <%if(current_user)%>
                              <% if current_user.role == "admin" %>
                                <li><%= link_to t('.lista_de_usuarios'), users_index_path %></li>

                              <% end %>
                            <% end %>

                        <% else %>
                            <li><%= link_to t('.editar_perfil'), edit_user_registration_path %></li>
                        <% end %>
                    </ul>
                  </li>

                  <li><%= link_to t('.sair'), destroy_user_session_path, method: :delete %></li>

              <% else %>
                <li>
                  <%= link_to t('.entrar'), new_user_session_path %>
                </li>
              <% end %>
          </li>
        </ul>

        <ul class="[ nav navbar-nav navbar-right ]">
          <%= render 'layouts/menu' %>
          <li class="[ visible-xs ]">
            <form action="/search" method="GET" role="search">
              <div class="[ input-group ]">
                <input name="keywords" type="text" class="[ form-control ]" placeholder=<%= t('.pesquisar') %>>
                <span class="[ input-group-btn ]">
                  <button class="[ btn btn-primary ]" type="submit"><span class="[ glyphicon glyphicon-search ]"></span></button>
                  <button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button>
                </span>
              </div>
            </form>
          </li>
        </ul>
      </div>
    </div>
    <div class="[ bootsnipp-search animate ]">
      <div class="[ container ]">
        <form action="/search" method="GET" role="search">
          <div class="[ input-group ]">
            <input type="text" class="[ form-control ]" name="keywords" placeholder=<%= t('.pesquisar') %>>
            <span class="[ input-group-btn ]">
              <button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </nav>
  <style type="text/css">

    .animate {
    -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar-wrapper{
    position: relative;
    display: inline-block;
 }

.navbar-bootsnipp {
  position: absolute;
  background-color: rgb(255, 255, 255);
  border-radius: 0px;
  margin-bottom: 0px;
  z-index: 100;
  padding: 0px;
}
.navbar-bootsnipp:nth-of-type(2) {
  border-top-width: 1px;
  z-index: 50;
}

.navbar-bootsnipp.affix-top {
  position: absolute;
  top: 0px;
  width: 100%;
}
.navbar-bootsnipp.affix {
  top: 0px;
  width: 100%;
}
.navbar-bootsnipp .navbar-toggle .icon-bar {
  background-color: rgb(95, 176, 228);
}

.navbar-bootsnipp .navbar-brand {
  color: rgb(95, 176, 228);
  font-weight: 900;
  letter-spacing: 2px;
}

.style_image {
      float: left;
      padding-left: 20px;
      padding-top: 10px;
    }

.navbar-bootsnipp .navbar-nav > li > a {
  border: 0px solid rgb(95, 176, 228);
  color: rgb(120, 120, 120);
  padding: 10px 10px;
}

.navbar-bootsnipp .navbar-nav > li > form > .input-group > input,
.navbar-bootsnipp .navbar-nav > li > form > .input-group > .input-group-btn > .btn {
  border-radius: 0px;
}

.navbar-bootsnipp .navbar-nav > li:not(.disabled).open > a,
.navbar-bootsnipp .navbar-nav > li:not(.disabled).active > a,
.navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:hover,
.navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:focus {
  border-left-width: 5px;
  color: rgb(95, 176, 228);
  padding-left: 10px;
}
.navbar-bootsnipp .navbar-nav > li.disabled > a {
  color: rgb(200, 200, 200);
}

.navbar-bootsnipp .navbar-nav > li > .dropdown-menu {
  border-radius: 0;
  margin-right: -1px;
  min-width: 220px;
  padding: 0px;
}
.navbar-bootsnipp .navbar-nav > li:not(.dropdown-right) > .dropdown-menu {
  left: 0px;
  margin-left: -1px;
  right: auto;
}
.navbar-bootsnipp .navbar-nav > li > .dropdown-menu > li > a {
  border-left: 0px solid rgb(95, 176, 228);
  color: rgb(120, 120, 120);
  font-size: 14px;
  font-weight: 400;
  padding: 10px 20px;
  white-space: nowrap;
}
.navbar-bootsnipp .navbar-nav > li > .dropdown-menu > li.active > a,
.navbar-bootsnipp .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-bootsnipp .navbar-nav > li > .dropdown-menu > li > a:focus {
  background-color: rgb(245, 245, 245);
  border-left-width: 5px;
  padding-left: 15px;
}

.navbar .bootsnipp-profile > a {
  padding-bottom: 9px;
  padding-top: 9px;
}
.navbar .bootsnipp-profile > a > img {
  border-radius: 50%;
  width: 32px;
}
.navbar .bootsnipp-profile > .dropdown-menu {
  width: 320px;
}
.navbar .bootsnipp-profile > .dropdown-menu > li > .row {
  padding: 5px 15px;
}
.navbar .bootsnipp-profile > .dropdown-menu > li > .row img {
  width: 100%;
}

.navbar-bootsnipp .bootsnipp-search {
  display: none;
}
.navbar-bootsnipp .bootsnipp-search .form-control {
  background-color: rgb(235, 235, 235);
  border-radius: 0px;
  border-width: 0px;
  font-size: 14px;
  padding: 30px 0px;
}
.navbar-bootsnipp .bootsnipp-search .form-control {
  background-color: rgb(235, 235, 235);
  border-radius: 0px;
  border-width: 0px;
  font-size: 14px;
  padding: 25px 0px;
}
.navbar-bootsnipp .bootsnipp-search .form-control:focus {
  border-color: transparent;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn {
  padding: 14px 16px;
  border-radius: 0px;
}
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn.active,
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn:hover,
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn:focus {
  padding: 14px 16px 14px 15px;
}
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn-default {
  background-color: rgb(245, 245, 245);
}
.nav-padding {
  padding-top: 61px;
}

@media screen and (min-width: 768px) {
    .navbar-bootsnipp .navbar-brand {
      font-size: 14px;
    height: auto;
    padding: 15px 5px;
  }
  .navbar-bootsnipp .navbar-nav > li > a {
    font-size: 14px;
    letter-spacing: 1px;
  }
  .navbar-bootsnipp .navbar-nav > li:not(.disabled).open > a,
  .navbar-bootsnipp .navbar-nav > li:not(.disabled).active > a,
  .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:hover,
  .navbar-bootsnipp .navbar-nav > li:not(.disabled) > a:focus {
    border-bottom-width: 5px;
    border-left-width: 0px;
    padding-bottom: 10px;
    padding-left: 14px;
  }

  .navbar-bootsnipp .navbar-nav > li.disabled > a {
    padding-left: 10px;
    padding-right: 10px;
  }


  .navbar-bootsnipp .bootsnipp-search {
    background-color: rgb(235, 235, 235);
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    visibility: hidden;
  }
  .navbar-bootsnipp .bootsnipp-search.open {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    visibility: visible;
  }
  .navbar-bootsnipp .bootsnipp-search > .container {
    padding: 0px;
  }
}
  </style>
  <script type="text/javascript">
    $(function() {

    $('a[href="#toggle-search"], .navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn[type="reset"]').on('click', function(event) {
    event.preventDefault();
    $('.navbar-bootsnipp .bootsnipp-search .input-group > input').val('');
    $('.navbar-bootsnipp .bootsnipp-search').toggleClass('open');
    $('a[href="#toggle-search"]').closest('li').toggleClass('active');

    if ($('.navbar-bootsnipp .bootsnipp-search').hasClass('open')) {
      /* I think .focus dosen't like css animations, set timeout to make sure input gets focus */
      setTimeout(function() {
        $('.navbar-bootsnipp .bootsnipp-search .form-control').focus();
      }, 100);
    }
  });

  $(document).on('keyup', function(event) {
    if (event.which == 27 && $('.navbar-bootsnipp .bootsnipp-search').hasClass('open')) {
      $('a[href="#toggle-search"]').trigger('click');
    }
  });

});
  </script>