Responsive Topnav example not closing after choice

Future Moose · December 28, 2018

Hello,

With reference to your "Responsive TopNav" example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav it works fine for the most part, except that when the "hamburger" icon is used it does not close down again after making a selection.

I have included my own slightly modified version of your example, simplified so there are only "home" and "news" menu items, and the hamburger icon will appear when reducing the width below 1000px.

How can this be modified to collapse the hamburger links upon making a selection? Thanks... Jon

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
    position: absolute;
    left: 0;
    top: 0;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

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

@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

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

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

<h2 id="home">Home</h2>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
<h2 id="news">News</h2>
asdf<br>
asdf<br>
asdf<br>

</body>
</html>

witt · January 4, 2019

Hello,

it works. Just add more <br> between the navigation items

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
    position: absolute;
    left: 0;
    top: 0;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

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

@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

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

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

<h2 id="home">Home</h2>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
<h2 id="news">News</h2>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
</body>
</html>

Future Moose · January 16, 2019

Hi Witt,

Thanks for your reply, but the problem still exists... The menu works fine when it comes to navigating to the correct anchor point (e.g. "#news").

The problem is that, even after a selection is made, the hamburger menu stays expanded until you hit the icon again... at least that's the behavior I see.

With your extra "asdf<br>" lines, the hamburger menu is still expanded, but just scrolls off the top of the screen, so you can't see it.

Try it... use your example, decrease width until the hamburger menu appears, select it, then "News". You should navigate to "#News" but then scroll back to the top of the page and you should see what mean.

Thanks.

Sign In

Responsive Topnav example not closing after choice

Recommended Posts

Future Moose

Link to comment

Share on other sites

witt

Link to comment

Share on other sites

Future Moose

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity