diff --git a/index.html b/index.html
index 4bcb618..9d85c92 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@
         <a href="#home" class="brand-logo">
           <img src="./source/images/fcc-khi.png">
         </a>
-        <a href="#" data-activates="mobile-menu" class="button-collapse">
+        <a href="#" data-activates="mobile-menu" class="button-collapse right">
           <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
         </a>
         <ul class="right hide-on-med-and-down">
diff --git a/source/js/index.js b/source/js/index.js
index 88396ac..42a11f1 100644
--- a/source/js/index.js
+++ b/source/js/index.js
@@ -4,7 +4,12 @@ let materialize = require('../../node_modules/materialize-css/dist/js/materializ
 
 
 $(document).ready(function () {
-  $(".button-collapse").sideNav();
+  $(".button-collapse").sideNav({
+      menuWidth: 300, // Default is 300
+      edge: 'right', // Choose the horizontal origin
+      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
+      draggable: true, // Choose whether you can drag to open on touch screens,
+    });
   $('.parallax').parallax();
   $('.carousel').carousel({ indicators: true, padding: 50, shift: 80 });
   let setCopyRightYear = () => {
diff --git a/source/scss/styles.scss b/source/scss/styles.scss
index 5a1797e..d6ec55e 100644
--- a/source/scss/styles.scss
+++ b/source/scss/styles.scss
@@ -82,7 +82,7 @@ h2 {
         @media screen and (max-width: $small-screen) {
             height: 52px;
             padding: 14px;
-            margin-left: 35px;
+            margin-left: 0px;
         }
     }
 }