Hey there,
After watching a youtube tutorial, I got inspired to create a hamburger menu. Everything was working smoothly when I resized my PC browser window to a specific width, as shown in the first screenshot:
https://i.sstatic.net/shreo.png
However, the issue arose when I tried accessing the same page on my Android (Samsung Galaxy S20) smartphone - the "classic" menu bar appeared instead.
https://i.sstatic.net/9GaH1.png
I'm thinking of adding a function that is specifically tailored for smartphones. This way, I can achieve the same hamburger menu on my smartphone as seen in the first image. Any suggestions on where to start?
To assist with troubleshooting, I have attached my html, css, and javascript files below.
Your help is greatly appreciated. Thanks!
Here's a snippet of my html code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" />
<script type="text/javascript" src="scripts/menu.js"></script>
</head>
<body>
<header>
<nav class="navbar">
<div class="branding">
<h2><a href="#" class="branding-logo">Welcome</a></h2>
</div>
...
Below is a snippet of my css code (mystyle.css):
:root {
box-sizing: border-box;
...
And here is a snippet of my javascript code (menu.js):
const hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function () {
this.classList.toggle("close");
});