Hamburger Menu icon disappears when clicking

Question

I am doing this navbar for a project. When I apply javascript to make the nav links disappear by transforming it into a new class called nav_links_hidden when in mobile mode. When nav_links_hidden is toggled the hamburger icon or button disappears when the link is clicked. Is it to do with my html or my js?

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta name="keywords" content="Barilaro LNP Hotel Queanbeyan Canberra Hospitality" />
    <meta name="description" content="John Barilaro's Hotel Business" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/normalize.css" />

    <title>Hotel Bruz</title>
</head>

<body>
    <header>
        <nav class="navbar">
            <label>
          <h1 class="brand_title">Hotel Barilaro</h1>
        </label>
            <ul class="nav_links" id="nav_links">
                <li class="nav_item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav_item">
                    <a href="#" class="nav-link">Bookings</a>
                </li>
                <li class="nav_item">
                    <a href="#" class="nav-link">Hosting</a>
                </li>
                <li class="nav_item">
                    <a href="#" class="nav-link">Rooms</a>
                </li>
                <li class="nav_item"></li>
            </ul>
            <label class="hamburgerbutton">
          <a
            href="javascript:void(0)"
            id="hamburgerlink"
            onclick="toggleMenu()"
          >
            <i class="fas fa-bars fa-2x"></i
          ></a>
        </label>
        </nav>
    </header>
    <script src="https://kit.fontawesome.com/8a891aad85.js" crossorigin="anonymous"></script>
    <script src="script/style.js" type="text/javascript"></script>
</body>

</html>

css

html {
    font-size: 62.5%;
}

.container {
    max-width: 1024px;
}

.navbar {
    width: 100vw;
    background-color: #549349;
    overflow: visible;
    position: relative;
}

.brand_title {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    font-size: 3.3rem;
    text-shadow: 2px 2px black;
    padding-left: 3rem;
    padding-top: 4rem;
}

.hamburgerbutton {
    margin-top: -34.8rem;
    margin-right: 2rem;
    float: right;
}

.fa-bars {
    color: white;
    width: 2rem;
    height: 3rem;
}

.navitems {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.nav_item {
    font-size: 4rem;
    background: #549349;
}

.nav-link:visited {
    color: white;
}

.nav-link {
    line-height: 7rem;
    margin-left: 25%;
    margin-right: 25%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    text-decoration: none;
}

.nav_links {
    list-style: none;
    display: block;
}

.nav_links_hidden {
    list-style: none;
    display: none;
}

.nav_links {}

.nav-link:hover {
    color: white;
    padding: 2.5px 2px;
    border: 3px solid white;
}

@media screen and (min-width:1024px) {
    .hamburgerbutton {
        display: none;
    }
    .nav_links {
        margin-top: -10rem;
        padding-left: 60%;
        display: inline-block;
    }
    .nav_links_hidden {
        margin-top: -30rem;
        padding-top: -20rem;
        padding-left: 60%;
        display: inline-block;
    }
    .nav_item {
        background: transparent;
        display: inline-block;
        font-size: 2.5rem;
        margin: 1.5rem;
    }
    .brand_title {}
}

js

function toggleMenu() {
    var hamburgerButton = document.getElementById("nav_links");
    if (hamburgerButton.className === "nav_links") {
        hamburgerButton.className = "nav_links_hidden";
    } else {
        hamburgerButton.className = "nav_links";
    }
}

Does this answer your question https://stackoverflow.com/questions/5898656/check-if-an-element-contains-a-class-in-javascript — Imran Rafiq Rather, Sep 09 '21 at 13:55
So you have to use `contains()` method in your JS and also to add class you should do `element.classList.add("mystyle");` Refer https://www.w3schools.com/howto/howto_js_add_class.asp This is already answered, So I think better to share with you the resource for you to explore — Imran Rafiq Rather, Sep 09 '21 at 13:58
Many [hamburger menu questions](https://stackoverflow.com/questions/69118889/css-hamburger-menu-stick-to-top-after-scrolling-down) today... :) — Some programmer dude, Sep 09 '21 at 13:59
@ImranRafiqRather Your solution doesn't solve the problem, which isn't even related to the way the classes are added or checked for. — BSdoukos, Sep 09 '21 at 14:01
@BSdoukos Sure Mate ! I actually didn't provided the solution but the links to go through. (These days have less availability of time). Thanks that you highlighted :) — Imran Rafiq Rather, Sep 10 '21 at 05:18

score 0 · Answer 1 · edited Sep 09 '21 at 14:00

0

I have seen this has no answers and I think I know the answer, but I'm very new at coding, so feel free to correct me if I'm wrong.

I think the problem lies on the

<a
   href="javascript:void(0)"
   id="hamburgerlink"
   onclick="toggleMenu()"
>

You could try to use

<a href="#">

to avoid the javascript link.

edited Sep 09 '21 at 14:00

Dharman

30,962
25
85
135

answered Sep 09 '21 at 13:55

AndiNowe

9
3

Or just use a button? – Pavel Horyna Sep 09 '21 at 14:04
Have you tested your solution? – BSdoukos Sep 09 '21 at 14:11

score 0 · Answer 2 · answered Sep 09 '21 at 14:35

The problem is in the CSS you're applying to .hamburgerbutton, which is wrapping the menu button:

.hamburgerbutton {
    margin-top: -34.8rem;
    margin-right: 2rem;
    float: right;
}

With float: right, the button gets positioned at the right lower corner of the menu, and margin-top: -34.8rem makes it go up to the right place. However, when the menu is closed, that right lower corner is higher up in the page, so that the button is positioned higher than it's needed and becomes hidden.

Using margin to position your button in the menu isn't the best choice. You can solve the addressed problem by positioning your button with position: absolute. That way, its position will not change depending on the menu's height.

.hamburgerbutton {
  position: absolute;
  right: 30px;
  top: 50px;
}

function toggleMenu() {
    var hamburgerButton = document.getElementById("nav_links");
    if (hamburgerButton.className === "nav_links") {
        hamburgerButton.className = "nav_links_hidden";
    } else {
        hamburgerButton.className = "nav_links";
    }
}

html {
    font-size: 62.5%;
}

.container {
    max-width: 1024px;
}

.navbar {
    width: 100vw;
    background-color: #549349;
    overflow: visible;
    position: relative;
}

.brand_title {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    font-size: 3.3rem;
    text-shadow: 2px 2px black;
    padding-left: 3rem;
    padding-top: 4rem;
}

.hamburgerbutton {
  position: absolute;
  right: 30px;
  top: 50px;
}

.fa-bars {
    color: white;
    width: 2rem;
    height: 3rem;
}

.navitems {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.nav_item {
    font-size: 4rem;
    background: #549349;
}

.nav-link:visited {
    color: white;
}

.nav-link {
    line-height: 7rem;
    margin-left: 25%;
    margin-right: 25%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    text-decoration: none;
}

.nav_links {
    list-style: none;
    display: block;
}

.nav_links_hidden {
    list-style: none;
    display: none;
}

.nav_links {}

.nav-link:hover {
    color: white;
    padding: 2.5px 2px;
    border: 3px solid white;
}

@media screen and (min-width:1024px) {
    .hamburgerbutton {
        display: none;
    }
    .nav_links {
        margin-top: -10rem;
        padding-left: 60%;
        display: inline-block;
    }
    .nav_links_hidden {
        margin-top: -30rem;
        padding-top: -20rem;
        padding-left: 60%;
        display: inline-block;
    }
    .nav_item {
        background: transparent;
        display: inline-block;
        font-size: 2.5rem;
        margin: 1.5rem;
    }
    .brand_title {}
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <meta name="keywords" content="Barilaro LNP Hotel Queanbeyan Canberra Hospitality" />
  <meta name="description" content="John Barilaro's Hotel Business" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/normalize.css" />

  <title>Hotel Bruz</title>
</head>

<body>
  <header>
    <nav class="navbar">
      <label>
          <h1 class="brand_title">Hotel Barilaro</h1>
        </label>
      <ul class="nav_links" id="nav_links">
        <li class="nav_item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav_item">
          <a href="#" class="nav-link">Bookings</a>
        </li>
        <li class="nav_item">
          <a href="#" class="nav-link">Hosting</a>
        </li>
        <li class="nav_item">
          <a href="#" class="nav-link">Rooms</a>
        </li>
        <li class="nav_item"></li>
      </ul>
      <label class="hamburgerbutton">
          <a
            href="javascript:void(0)"
            id="hamburgerlink"
            onclick="toggleMenu()"
          >
            <i class="fas fa-bars fa-2x"></i
          ></a>
        </label>
    </nav>
  </header>
  <script src="https://kit.fontawesome.com/8a891aad85.js" crossorigin="anonymous"></script>
  <script src="script/style.js" type="text/javascript"></script>
</body>

</html>

Hamburger Menu icon disappears when clicking

2 Answers2