Responsive navbar based on w3 schools tutorial not opening using javascript

Question

It's probably something very simple given there's fewer than 90 lines of code across the html, css and js but I cannot see why it doesn't work.

It's mostly still formatting correctly, however the critcal issue is that clicking the button does not seem to run the javascript to change the class to responsive, or if it does, the responsive class is not working.

Live example available here https://jsfiddle.net/hh5brhfk/1/

HTML:

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

/* styling for the responsive nav bar */

.topnav .icon {
  display: none; /* Hide the link that should open and close the topnav on small screens */
}

@media screen and (max-width:959px) {
  /* Add a black background color to the top navigation */
  .topnav {
    background-color: #333;
    overflow: hidden;
  }

  .topnav ul {
    list-style-type: none;
    margin-top:0px; 
  }

  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
}
/* When the screen is less than 959 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 959px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav li.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 959px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive li a {
    float: none;
    display: block;
    text-align: left;
  }
}

<div class="topnav" id="nav-container">
    <nav>
      <ul>
      <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="whatweteach.php">What we teach</a></li>
        <li><a href="gallery.php">Gallery</a></li>
        <li><a href="contact.php">Contact Us</a></li>
        <li class="icon"><a href="javascript:void(0);"  onclick="myFunction()">&#9776;</a></li>
      </ul>
    </nav>
  </div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

You are required to post your example code here, not link to a third party site which can change tomorrow helping no one: [mcve] — Rob, Oct 10 '17 at 12:42
This question should be closed as being not reproducible. The questioner has stated in an answer that the problem statement is missing a div tag and that resolves the issue. — Rob, Oct 10 '17 at 12:46

Dan Kreiger · Answer 1 · 2017-10-10T12:38:04.640

Just a few changes.

First of all, in JSFiddle you need to change the JavaScript settings load type to No wrap - in <head>

Here's a SO answer on why you need to do this in JSFiddle.

Then notice you are querying an id myTopnav that does not exist.

Instead you can query your existing topnav class like so:

var x = document.querySelector(".topnav");

Try the snippet below:

function myFunction() {
  var x = document.querySelector(".topnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

/* styling for the responsive nav bar */

.topnav .icon {
  display: none;
  /* Hide the link that should open and close the topnav on small screens */
}

@media screen and (max-width:959px) {
  /* Add a black background color to the top navigation */
  .topnav {
    background-color: #333;
    overflow: hidden;
  }
  .topnav ul {
    list-style-type: none;
    margin-top: 0px;
  }
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
}


/* When the screen is less than 959 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 959px) {
  .topnav li:not(:first-child) {
    display: none;
  }
  .topnav li.icon {
    float: right;
    display: block;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 959px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive li a {
    float: none;
    display: block;
    text-align: left;
  }
}

<div class="topnav" id="nav-container">
  <nav>
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About Us</a></li>
      <li><a href="whatweteach.php">What we teach</a></li>
      <li><a href="gallery.php">Gallery</a></li>
      <li><a href="contact.php">Contact Us</a></li>
      <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
    </ul>
  </nav>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

Links to jsfiddles, and solutions involving jsfiddle, are off topic and not helpful. Such things are not searchable on SO and can change or disappear tomorrow helping no one in the future. https://meta.stackoverflow.com/a/284237/162698 — Rob, Oct 10 '17 at 12:43
@Rob thank you for the clarification. I will keep this in mind for the future when posting questions or answers. It makes sense since SO has it's own built in fiddle so-to-speak with the snippet editor, so there's no need for JSFiddle. Although there are certain topics like `localStorage` that cannot be demonstrated with the SO snippet tool. — Dan Kreiger, Oct 10 '17 at 12:51

score 0 · Answer 2 · answered Oct 10 '17 at 12:32

0

If anyone else has the same issue it was caused by a missing div tag.

<div id="nav-container">
<div class="topnav" id="myTopnav">

answered Oct 10 '17 at 12:32

jcreek

43
10

score 0 · Answer 3 · answered Oct 10 '17 at 12:37

You used myTopnav to getElementById but in your code don't have this. Used nav-container for that

function myFunction() {
    var x = document.getElementById("nav-container");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

/* styling for the responsive nav bar */

.topnav .icon {
  display: none; /* Hide the link that should open and close the topnav on small screens */
}

@media screen and (max-width:959px) {
  /* Add a black background color to the top navigation */
  .topnav {
    background-color: #333;
    overflow: hidden;
  }

  .topnav ul {
    list-style-type: none;
    margin-top:0px; 
  }

  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
}
/* When the screen is less than 959 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 959px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav li.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 959px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive li a {
    float: none;
    display: block;
    text-align: left;
  }
}

<div class="topnav" id="nav-container">
    <nav>
      <ul>
      <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="whatweteach.php">What we teach</a></li>
        <li><a href="gallery.php">Gallery</a></li>
        <li><a href="contact.php">Contact Us</a></li>
        <li class="icon"><a href="javascript:void(0);"  onclick="myFunction()">&#9776;</a></li>
      </ul>
    </nav>
  </div>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

Responsive navbar based on w3 schools tutorial not opening using javascript

3 Answers3