Jump to content
DorothyJK

Responsive navbar - hamburger icon not responding

Recommended Posts

I'm trying to set up a template for a website, with a responsive top border with dropdowns in the navigation bar.  I thought I had it all working at one time, but have gone back to previous files to no avail.  The menu is responsive, and goes down into a hamburger icon, but clicking on the hamburger icon does nothing.  I'm trying to do this without using too many external files.

I think the problem must be in the javascript function combined with the media queries, but I haven't been able to see the problem.  I used the W3Schools responsive navbar with dropdowns, from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown as a basis for this.

The files I have are index.htm, a top border file, top.htm in the folder _borders, and 2 css files in a css folder: mystyles.css and topnav.css.  This is the basic code from index.htm.  I excluded site-identifying code and content.  I've attached the other 3 files - didn't know how to paste them here separately.  In the top.htm and index.htm I've commented out references to the mystyles.css file and it doesn't make any difference. 

I'm using Brackets for this, and using Live Preview.  If I just open the index file directly in Chrome or Firefox, there is no formatting, no nav bar or menu.  But it looks just lovely in the Brackets Live Preview (other than the hamburger icon not responding.  With my working website, I can open the index file in Chrome or Firefox and all is good.

If someone can provide some direction I'd really appreciate it!

 

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="author" content="USTaxTips.net"/>
<link rel="stylesheet" href="../css/mystyles.css">  
<link rel="shortcut icon" href="/favicon.ico">

</head>

<body>
<div w3-include-html="_borders/top.htm"></div>
    <script>
        includeHTML();
    </script>
<div id="container">

</div>  
</body>
</html>
  

 

mystyles.css topnav.css top.htm

Share this post


Link to post
Share on other sites

I would guess that includeHTML() won't actually run any Javascript that is in the included HTML file, you should put that Javascript in a separate file and use a <script> tag in the main document for it.

The w3-include should probably only be used for short pieces of pure HTML which should not contain any <!DOCTYPE>, <html>, <head>, <body>, <style> or <script> tags. Things start behaving unpredictably if you try to do anything other than load plain static content.

Share this post


Link to post
Share on other sites

Thanks very much for your response!

Are you saying that I can't "include" the top.htm border if it uses any javascript?  Or that I just shouldn't use the w3-include?

And you're right - if I put the code from top.htm directly into the index file then everything works just fine.

But I want to have the navbar in only one file so if it needs changing I don't have to change 1,000 pages!

Share this post


Link to post
Share on other sites

Cut out everything from top.htm except for the section of code that contains the menu. w3-include is not like an iframe, it does not need a complete HTML document. You can put the Javascript into an external .js file and use a <script> tag to include it right below the place where you include top.htm.

top.htm should be reduced to just this:

<div class="topnav" id="myTopnav">
 <a href="../index.htm">Home</a>
  <a href="../whatsnew.htm">What's New</a>
  <a href="../calculators.htm">Calculators</a>
    <div class="dropdown">
        <button class="dropbtn">Tax 
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <a href="../personaltax.htm">Personal Tax</a>
            <a href="../taxrates.htm">Tax Rates</a>
        </div>
    </div> 
    <div class="dropdown">
        <button class="dropbtn">Financial Planning 
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="../freein30.htm">Free In 30!</a>
          <a href="../save_money.htm">Save Money</a>
        </div>
    </div>     
  <a href="../resources.htm">Resources</a>
  <a href="../sitemap.htm">Site Map</a>
<!-- the &#9776 provides the hamburger icon -->    
  <a href="#" class="icon">&#9776;</a> 
</div>

In the external Javascript file, you would put your Javascript function and then you would add some code to attach an event listener to the link as follows:

var icon = document.querySelector("#myTopNav .icon");
icon.addEventListener("click", myFunction);

The code on your main HTML page should look something like this, but with the correct path to your external Javascript file.

<div w3-include-html="_borders/top.htm"></div>
<script>
  includeHTML();
</script>
<script src="filename.js"></script>

 

My preference is to not use Javascript includes because it slows down the page loading, search engines can't see the content and users who block Javascript won't see anything on your page. Usually you'll have a server-side programming language which does the includes for you.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...