Ruby on Rails haml navigation bar hamburger menu

Question

I have a problem with my ruby on rails navigation bar. I am using haml as well as the bootstrap gem.

Here is my application.html.haml

!!!
%html
%head
  %title GameX
  = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true 
  = javascript_include_tag 'application', 'data-turbolinks-track' => true
  = csrf_meta_tags

%body
  %nav.navbar.navbar-inverse
    .container
        %ul.nav.navbar-nav.navbar-left
          .navbar-brand= link_to "GameX", root_path

      - if user_signed_in?
        %ul.nav.navbar-nav.navbar-left
          %li= link_to "New GameX", new_pic_path
          %li= link_to "Settings", edit_user_registration_path
          %li= link_to "Sign Out", destroy_user_session_path, method: :delete
      - else
        %ul.nav.navbar-nav.navbar-left
          %li= link_to "Sign Up", new_user_registration_path
          %li= link_to "Log In", new_user_session_path

  .container
    -flash.each do |name, msg|
      =content_tag :div, msg, class: "alert alert-info"

    =yield  

I would like to add a hamburger menu that is responsive. So when the browser becomes small the hamburger menu appears next to the navbar brand and is clickable. How do I achieve so?

I've tried searching for a valid tutorial online but they all seem to incorporate something else.

EDIT: I have gotten rid of the problem where when the browser is small the link stays next to the brand.

Answer 1

Have a look at the documentation for the navbar component .

You will need to add a button for the hamburger menu with the classes navbar-toggle collapsed next to your navbar-brand anchor.

You will also need to add your links in to a div with the classes collapse navbar-collapse which is what is triggered by your hamburger menu via data-target attribute.