Fix mobile toggle menu functionality #32
+133
−132
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,11 @@ | ||
| window.onload = () => { | ||
| const navMenu = document.querySelector('.nav-menu'); // Get the navigation menu element | ||
| const navItems = document.querySelectorAll('.nav-item'); // Get all navigation items | ||
| const hamburger = document.querySelector('.nav-toggle'); // Get the hamburger menu icon | ||
|
|
||
| const toggle = e => e.classList.toggle('is-active'); | ||
| const toggleNav = ({ target }) => Array.from(navMenu.classList).includes('is-active') ? toggle(navMenu) : null; | ||
|
|
||
| hamburger.addEventListener('click', () => toggle(navMenu));//Did Changes here(removed the in-active) | ||
| Array.from(navItems).forEach(e => e.addEventListener('click', toggleNav)); | ||
| } | ||
|
There was a problem hiding this comment. The indentation changed in this file. Let's revert them. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,136 +1,137 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Portfolio</title> | ||
| <!-- css files --> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> | ||
| <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css"> | ||
| <link rel="stylesheet" type="text/css" href="assets/css/styles.css"> | ||
|
|
||
| <link rel="icon" type="image/x-icon" href="assets/img/favicon.png"> | ||
| <meta name="author" content="Hassan Ali"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| </head> | ||
| <body> | ||
| <!-- Navbar --> | ||
| <nav class="nav container void-background"> | ||
| <!-- This "nav-menu" is hidden on mobile --> | ||
| <!-- Add the modifier "is-active" to display it on mobile --> | ||
| <div class="nav-left"> | ||
| <a href="http://medium.com/@hassanhelfi/" class="nav-item"> | ||
| <span class="icon"> | ||
| <i class="fa fa-medium"></i> | ||
| </span> | ||
| </a> | ||
| <a href="http://github.com/helfi92" class="nav-item"> | ||
| <span class="icon"> | ||
| <i class="fa fa-github"></i> | ||
| </span> | ||
| </a> | ||
| <a href="https://twitter.com/hassanhelfi" class="nav-item"> | ||
| <span class="icon"> | ||
| <i class="fa fa-twitter"></i> | ||
| </span> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="nav-right nav-menu"> | ||
| <a class="nav-item" href="#about">About</a> | ||
| <a class="nav-item" href="#projects">Projects</a> | ||
| <a class="nav-item" href="#social">Social</a> | ||
| </div> | ||
|
|
||
| <!-- This "nav-toggle" hamburger menu is only visible on mobile --> | ||
| <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" --> | ||
| <span class="nav-toggle"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </span> | ||
| </nav> | ||
| <!-- About Me --> | ||
| <section id="about" class="section section-1"> | ||
| <div class="container has-text-centered"> | ||
| <!-- Source: https://flic.kr/p/pAZBNK --> | ||
| <img class="avatar" src="assets/img/profile.png"> | ||
| </div> | ||
| <div class="container"></br> | ||
| <p class="intro"> | ||
| Lorem Khaled Ipsum is a major key to success. To succeed you must believe. When you believe, you will succeed. Mogul talk. Find peace, life is like a water fall, you’ve gotta flow. Lion! Fan luv. Eliptical talk. | ||
| </p> | ||
| </div> | ||
| </section> | ||
| <!-- Projects --> | ||
| <section id="projects" class="section section-2"> | ||
| <div class="container"> | ||
| <div class="has-text-centered"> | ||
| <h3 class="title is-3">Projects</h3> | ||
| </div> | ||
| <div class="columns is-multiline is-desktop"> | ||
| <!-- Project 1 --> | ||
| <div class="column"> | ||
| <div class="box project-text"> | ||
| <article> | ||
| <div> | ||
| <figure class="image project-figure"> | ||
| <img src="assets/img/project-1.jpg" alt="Image"> | ||
| </figure> | ||
| </div> | ||
| <div> | ||
| <p> | ||
| They don’t want us to eat. I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. | ||
| </p> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| <!-- Project 2 --> | ||
| <div class="column"> | ||
| <div class="box project-text"> | ||
| <article> | ||
| <div> | ||
| <figure class="image project-figure"> | ||
| <img src="assets/img/project-2.jpg" alt="Image"> | ||
| </figure> | ||
| </div> | ||
| <div> | ||
| <p> | ||
| Bless up. Another one. How’s business? Boomin. Don’t ever play yourself. Life is what you make it, so let’s make it. | ||
| </p> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Social --> | ||
| <section id="social" class="section section-3"> | ||
| <div class="container"> | ||
| <div class="has-text-centered"> | ||
| <h3 class="title is-3">Let's Socialize</h3> | ||
| </div> | ||
| <div class="social-container columns"> | ||
| <div class="column is-6 has-text-centered"> | ||
| <a target="_blank" href="https://ca.linkedin.com/in/hassan-ali-6132468a"><img class="" src="assets/img/linkedin.png"></a> | ||
| </div> | ||
| <div class="column is-6 has-text-centered"> | ||
| <a target="_blank" href="https://www.facebook.com/Hassan.Helfi"><img class="" src="assets/img/facebook.png"></a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Footer --> | ||
| <section class="section-4 has-text-centered container"> | ||
| <a href="http://www.hassanali.me/about">Hassan Ali</a> | ||
| </section> | ||
|
|
||
| <!-- Scripts --> | ||
| <script src="controller.js"></script> | ||
| </body> | ||
| </html> | ||
| ~ |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How can I replicate the issue on my end? When I go to https://hassanali.me/studorlio/ using the mobile view, the hamburger menu works for me. I may be missing something.
screencast.2024-07-18.20-00-22.mp4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hello @helfi92 ,
I hope you are doing well.
I've reverted the changes to controller.js and restored it to its previous state.
And
It looks like the hamburger menu is working fine for me on mobile view, as well and I'm not able to replicate the issue. Since this issue was reported by someone else, it might be specific to certain devices or conditions.
Best Regards
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Asked the author of the issue for more information - #30 (comment)