Click here to Skip to main content
14,691,039 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
So i've been on the internet for hours looking for a solution for this, i've tried at least 20 different things and none worked. I need to know how to make my Hamburger menu close when a link inside of the menu is clicked.

<!-- Hamburger Menu (for mobile) -->
    <link rel="stylesheet" href="">

      <div class="topnav" id="myTopnav" style="position:absolute;top:0px;">
        <a href="#" class="active" class="nav-item" id="fn">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">


/* Makes Hamburger Heading Visible On Mobile Only */
  .topnav .icon, #myTopnav, .active {
    visibility: visible;
    z-index: 10000;

/* Width Of Hamburger Navigation */
  .topnav {
    width: 100%;

/* Removes Desktop Heading & Navigation */
  .nav, .top-heading {
    display: none;

/* Header Color */
  #fn {
    color: #ffffff;
    font-size: 32px;

  /* Background And Overflow Of Hamburger Navigation */
  .topnav {
    background: linear-gradient(to top, #ff6699 0%, #ff9999 100%);
    overflow: hidden;

/* Link Style Inside Hamburger Navigation */
  .topnav a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 26px 16px;
    text-decoration: none;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 28px;

/* Link Properties On Hover */
  .topnav a:hover {
    background-color: #ffffff;
    color: black;

/* Active Highlight Of Current Page */
  .active {
    background: linear-gradient(to top, #ff6699 0%, #ff9999 100%);
    color: #ffffff;

/* Closed Hamburger Properties */
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;

/* Open Hamburger Properties */
.topnav.responsive {position: relative;}
 .topnav.responsive a.icon {
   position: absolute;
   right: 0%;
   top: 0;

 /* Open Link Properties */
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;

My Javascript (this here is what allows the menu to open, if there is a way for me to keep this functional and also be able to close it when link is clicked would be great):

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

What I have tried:

I've tried different Javascript code, none seemed to work with the code i already have.
Updated 8-Nov-18 4:22am
Mohibur Rashid 8-Nov-18 0:55am
What do you mean by close? Closing the window? If so, have you considered redirecting

1 solution

I can offer you an interesting and non-conventional answer.

Build your menu as an open list that looks as you wish (links, etc.) in the form of an HTML-string stored in a javaScript variable.

- for your open event, set innerHTML value = your menu string variable
- for close event, set innerHTML to an empty string, or whatever you wish in place of the menu.

This is not a 'typical' solution, but if you understand where I'm taking you with this you will have a very powerful tool added to your 'arsenal', and if you haven't started using it already, your half-way done with learning to use AJAX.
Richard Deeming 9-Nov-18 8:48am
That won't be particularly good for performance. And unless you're using delegated events, it will destroy any event handlers every time you open or close the menu.
W Balboos, GHB 9-Nov-18 9:05am
As noted, non-conventional.

Since it's internet based - how much loss will really be observable in performance?   It's not how I'd do it. It appears, as submitted, that the activity of the items is link-based - so no events (if you don't count clicking a link) are in jeopardy. It does, in its way, illustrate my strength and hamartia: Aut inveniam viam aut faciam

And ultimately - it will, at least, work.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900