why does the hamburger icon not appear when i click any other page that isn't home?-CodePudding

i have a responsive navbar for my website, where if the media goes below 600px, the menu bar becomes a hamburger bar. I added two navbars, one for the desktop horizontal nav bar, and another one for the hamburger (originally i only had one navbar that just switched styles when it went below 600px, but i wanted the hamburger bar label to match the page it was on, so i made a new navbar that only appears when it goes below 600px).

However, the three hamburger menu lines disappear whenever I click to go to another page (on the mobile screen). I can see it on the home page, but not the resources or action page. On those two pages, I can still click it, but the icon is not there. I can't figure out how to fix it.

I tried to make separate javascript codes for each page, but I don't think thats the problem.

https://replit.com/@pbrc/asianhate2#style.css here's the code, its kind of all over the place as I made this website when I was first introduced to html and I'm expanding on it these days.

CodePudding user response：

If you look on your console, when you navigate to a page, for instance to /resources, you can see an error:

script.js:35 Uncaught ReferenceError: $ is not defined at script.js:35:1

I think your problem is that your are only adding jQuery to your home page

Try adding the jquery script on all pages and see if that fixes the problem

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

(you do that for your home page on your index.html on line 22)

By the way, on your home page HTML, on line 21, there is a <head>. That seems strange, because you already open the head on line 3. Maybe you should remove that from line 21