Creating bootstrap navigation bar with HAML on Rails

I’m trying to make a responsive hamburger navigation bar however I do not know how. I tried following the bootstrap website and that does not work. If the page is wide open it the sign in and login buttons don’t show on the nav bar, and if I shorten the page the bars don’t appear.
application.html.haml

!!!
%html
%head
	%title Recipeazy
	= stylesheet_link_tag    'application', media: 'all'
	= javascript_include_tag 'application'
	%link{:rel => "stylesheet", :href => "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"}
	%link{:rel => "stylesheet", :href => "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"}
	
	= csrf_meta_tags
%body
	%header
		%nav.navbar.navbar-fixed-top{role: "navigation"}
			.container-fluid
				.navbar-header
					%button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
					%span.sr-only Toggle navigation
					%i.fa-fa-bars
				
			.navbar-brand
				= link_to "Recipeazy", root_path
				
				.collapse.navbar-collapse.navbar-collapse
					%ul.navbar-nav.navbar-right
						- if user_signed_in?
							%li.nav-item
								= link_to "Home", root_path
								%i.fa.fa-home
							%li.nav-item
								= link_to "About Us ", about_path
								%i.fa.fa-book
							%li.nav-item
								= link_to "Settings", edit_user_registration_path
								%i.fa.fa-cog
							%li.nav-item
								= link_to "Add New Recipe", new_post_path
							%li.nav-item
								= link_to "Sign Out", destroy_user_session_path, method: :delete
						- else
							%li.nav-item
								= link_to "Log In", new_user_session_path
							%li.nav-item
								= link_to "Sign Up", new_user_registration_path
			
	%p.notice= notice
	%p.alert= alert
	.wrapper
		= yield

application.css.scss

/*
 *= require_self
 */

body {
	font-family: "Proxima Nova";
	font-weight: 100;
}

h1 {
  padding-left: 80px;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 100;
}

.wrapper {
	width: 80%;
	margin: 0 auto;
}

.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.button {
	border: 1px solid #9B9B9B;
	padding: .7rem 1.25rem;
	border-radius: .3rem;
	outline: none;
	background: white;
	color: #9B9B9B;
}

header {
	width: 100%;
	padding: 2rem 0;
	border-bottom: 1px solid #E4E4E4;
	#logo {
		float: left;
		font-size: 1.75rem;
		a {
			color: #333233;
			text-decoration: none;
			&:hover {
				color: #6d6969;
			}
		}
	}
	nav {
		float: left;
		a {
			margin-left: 1.5rem;
			line-height: 2;
			color: #9B9B9B;
			text-decoration: none;
			&:hover {
				color: #000000;
			}
		}
	}
}

.form_group {
  padding-top: 5px;
}
#form-container{
  width:960px;
  margin:0 auto;
  box-shadow: 0 0 12px black;
  padding:20px 0;
}
  
input {
  border-radius: 4px;
  width: 35%;
}

  
text {
  border-radius: 4px;
}
label {
  padding-right: 5px;
  padding-left: 3px;
}

.notice, .alert {
  padding-left: 125px;
  padding-top: 25px;
}

.alert {
  padding-left: 125px !important;
  padding-top: 25px !important;
}

p {
  padding: auto;
}



// Page styling 

h1 {
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: bold !important;
    letter-spacing: -1px;
}

// Navbar Styling 

.navbar-brand {
    text-transform: uppercase;
    letter-spacing: -1px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 25px !important;
}

.navbar-brand > a:hover {
    text-decoration: none;
}

.icon-bar {
   background-color:#000 !important;
}

// Jumbotron Styling

.jumbotron.vertical-center {
    margin-bottom: 0;
}

.vertical-center {
    min-height: 600px;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align : center;
    -webkit-align-items : center;
    -moz-box-align : center;
    -ms-flex-align : center;
    align-items : center;
    -webkit-box-pack : center;
    -moz-box-pack : center;
    -ms-flex-pack : center;
    -webkit-justify-content : center;
    justify-content : center; 
}

.jumboContent {
    text-align: center;
}


@import 'home.css.scss';
@import 'posts.css.scss';
@import 'font-awesome';
@import 'bootstrap';

And finally, the application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery3
//= require_tree .
//= require popper
//= require bootstrap
//= require bootstrap-sprockets

As you can see, I’ve installed font-awesome (and I would like to use the bars that they have) but I am not experienced enough to know how to encorporate it and to make the hamburger menu. All help is appreciated.

1 Like