1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why is my nav-icon "hamburger" icon suddenly invisible yet still works?

Discussion in 'HTML & Website Design' started by sergioq, Sep 8, 2021.

0
  1. #1
    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="">&nbsp;<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):
    upload_2021-9-8_13-50-31.png
     
    Last edited by a moderator: Sep 8, 2021
    sergioq, Sep 8, 2021 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    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):
     
    sarahk, Sep 8, 2021 IP
  3. sergioq

    sergioq Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    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.
     
    sergioq, Sep 8, 2021 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    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.
     
    sarahk, Sep 8, 2021 IP
  5. sergioq

    sergioq Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    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.
     
    sergioq, Sep 8, 2021 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #6
    Only proves how correct @deathshadow has been on everything frameworks.
     
    qwikad.com, Sep 11, 2021 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #7
    Not necessarily, but it does prove the need to either upskill or maintain your relationship with your website developer.
     
    sarahk, Sep 11, 2021 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    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.
     
    Last edited: Sep 11, 2021
    deathshadow, Sep 11, 2021 IP