Fix burger button for RWD...

haceneouserir · Jan 16, 2022 · 6b97b41 · 6b97b41
1 parent 01f02f0
commit 6b97b41
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/css/app.css b/css/app.css
@@ -84,6 +84,7 @@ header {
 /* Hide the icon of small screens  */
 .navbar .icon {
   display: none;
+  cursor: pointer;
 }
 
 /* Style multi sections & footer */

diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
           <a class="item" href="#services">Services</a>
           <a class="item" href="#review">Review</a>
           <a class="item" href="#contact-me">Contact Me</a>
-          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+          <a class="icon">
             <i class="bi bi-list"></i>
           </a>
       </nav>
@@ -145,6 +145,8 @@ <h2 class="title-2">Contact Me</h2>
       </div>
     </footer>
     <!-- End Footer -->
+    <!-- JQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <!-- JS -->
     <script src="js/app.js" defer></script>
   </body>

diff --git a/js/app.js b/js/app.js
@@ -18,11 +18,15 @@ function backToTop() {
   document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 }
 
-function myFunction() {
-  var nav = document.getElementById("myTopnav");
-  if (nav.className === "navbar") {
-    nav.className += " responsive";
-  } else {
-    nav.className = "navbar";
-  }
-}
+// function myFunction() {
+//   var nav = document.getElementById("myTopnav");
+//   if (nav.className === "navbar") {
+//     nav.className += " responsive";
+//   } else {
+//     nav.className = "navbar";
+//   }
+// }
+
+$('.icon').click(function () { 
+  $('#myTopnav').toggleClass('responsive');
+});