From fe34df465970a8e862db5226276026683fada129 Mon Sep 17 00:00:00 2001
From: unknown <afrazafaq96@gmail.com>
Date: Sat, 24 Mar 2018 18:43:33 +0500
Subject: [PATCH] solved menu issue

---
 index.html              | 2 +-
 source/js/index.js      | 7 ++++++-
 source/scss/styles.scss | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

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;
         }
     }
 }