I have a site written for me a long time ago. All of a sudden the "hamburger icon" stopped appearing. It's still there, as I can click on it and the drop down menu appears. I have zero experience with Javascript and am tied up on trying to learn Swift. Any chance that something is wrong with the outside referenced script? I am able to change the nav bar from light to dark. But can't seem to figure out why this icon just disappeared. Below is a trimmed, but full code, and a screenshot <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="author" content=""> <title>My Site</title> <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 0px; } .container { width: 550px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> <!-- if (screen.width <= 699) { document.location = "mobile/index.html"; } //--> </script> <script src="js/bootstrap.min.js"></script> <p style="font-size:150%;margin:20px;width:50%;padding-top:25px"> </p> <p style="font-size:150%;margin:20px;width:75%;margin-right:150px;"> <i><font color = "#9b1313"> </p> <p style="font-size:5vw;"></p> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <nav class="navbar fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href=""></a> </nav> <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href=""> <br></a> <a class="navbar-brand" href=""> </a> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href=""></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="/index.html" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="guerillamarketing.html">Guerilla Marketing</a> <a class="dropdown-item" href="patents.html">Patents</a> <a class="dropdown-item" href="sumup.html">What's next ... ?</a> <a class="dropdown-item" href="contact.html">Contact</a> </div> </li> </ul> </div> </nav> <div class="container"> </div> <div class="starter-template"> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> </body> </html> Code (markup):
My first step with these kinds of problems is to recreate it on codepen or jsfiddle. I made this: https://codepen.io/itamer/pen/YzQNojB but I can't see your code at all. It'd be great if you could tidy up your code so that everything is in the right place and then repost. #1 Why are these scripts at the top of the <body> and not in the <head> or at the end of the <body>? <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> <!-- if (screen.width <= 699) { document.location = "mobile/index.html"; } //--> </script> <script src="js/bootstrap.min.js"></script> Code (markup): #2 why are these paragraphs here? There's no "id" so it doesn't look like you're going to insert values <p style="font-size:150%;margin:20px;width:50%;padding-top:25px"> </p> <p style="font-size:150%;margin:20px;width:75%;margin-right:150px;"> <i><font color = "#9b1313"> </p> Code (markup): #3 Why are you using document.write for this? why not just code it normally or use $.getScript()? <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> Code (markup):
I did not write this, it was written for me long ago. I have zero experience with Javascript. It totally served its purpose until the icon just stopped showing up.
That's cool. Now it's not working you'll need to step up and, at the very least, learn how an HTML page should be structured. This is the discussion section where we help you to help yourself.
I've tried the debugger in Safari. The best I have come up with so far is to use Safari's debugger and I saw that I didn't have a js folder on my server. I was able to get that, but that didn't seem to be the problem. In fact, putting bootstrap locally added another problem, the menu didn't toggle properly.
Not necessarily, but it does prove the need to either upskill or maintain your relationship with your website developer.
Not necessarily frameworks, but it certainly is riddled with those pesky 3i of web development: ignorance, incompetence, and ineptitude. BUTTON tag with scripttardery for something that doesn't even need to be scripted, non-semantic markup in the dropdowns, endless pointless classes for NOTHING, endless pointless DIV for nothing, a total lack of proper semantics, aria roles for nothing, paragraphs around content that is not structurally or grammatically a paragraph, static inlined style, FONT tag like it's still 1997, static scripting in the markup... Suggested course of action? Learn HTML, CSS, and start over from scratch, there is NOTHING there worth even trying to salvage. Whoever built that does not know enough about websites to be building them. Of course if they did know enough, they wouldn't be using the dumbass dipshit rubbish that is bootcrap in the first place! I mean, guessing WILDLY the most markup that should be on that page is something like: <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" > <link href="screen.css" rel="stylesheet" media="screen" > <title>My Site</title> </head><body> <header id="top"> <h1><a href="./">Site Title</a></h1> <input type="checkbox" id="toggle_mainMenu" hidden> <label for="toggle_MainMenu"></label> <nav id="mainMenu"> <ul> <li><a href="guerillamarketing.html">Guerilla Marketing</a></li> <li><a href="patents.html">Patents</a></li> <li><a href="sumup.html">What's next ... ?</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> </body></html> Code (markup): Anything more than that is likely a monument to 3i.