Open Mobile Menu on Click

Solution for Open Mobile Menu on Click
is Given Below:

First of all, I’m pretty much a beginner at this.

Here is my HTML:

<nav id="site-navigation" class="main-navigation main-navigation--default">
  <div class="container">
    <a href="#" class="navigation-bar-toggle">
      <i class="ion-navicon-round"></i>
      <span class="mobile-nav-menu-label">Menu</span>
    </a>
    <div class="navigation-bar-wrapper">
      <div class="primary nav-menu">
        <ul id="menu-menu-1" class="primary nav-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-107 current_page_item menu-item-has-children menu-item-182"><a href="https://example.com">Homepage</a>
            <ul class="sub-menu">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-820"><a href="https://example.com/service1">Service 1</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-823"><a href="https://example.com/service2">Service 2</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-818"><a href="https://example.com/service3">Service 3</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-821"><a href="https://example.com/service4">Service 4</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-822"><a href="https://example.com/service5">Service 5</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="https://example.com/about">About</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-184"><a href="https://example.com/contact">Contact</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-185"><a href="https://example.com/privacy">Privacy</a></li>
        </ul>
      </div>            
    </div>
  </div>
</nav>

And here is my css:

.main-navigation,
.tertiary-navigation {
  background-color: #fff;
  position: relative;
  z-index: 50; }

.tertiary-navigation {
  z-index: 1; }

.navigation-bar-toggle {
  padding: 10px 0;
  display: inline-block;
  vertical-align: middle; }

.navigation-bar-toggle {
  float: left; }

ul.nav-menu [class^="ion"]:before,
.nav-menu [class^="ion"]:before {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 7px;
  margin-top: -5px; }

.main-navigation .mega-category-list-wrapper,
.primary-header .nav-menu.primary {
  display: none;
  vertical-align: middle; }

.nav-menu ul,
.nav-menu {
  margin: 0;
  padding: 0;
  list-style: none; }

.navigation-bar-toggle {
  vertical-align: middle;
  font-size: 15px; }
  
.navigation-bar-toggle i {
  margin-right: 5px;
  vertical-align: middle; }

.navigation-bar-toggle i {
  font-size: 25px; }

.site-header .nav-menu-container,
.site-header .menu {
  display: inline-block; }

.navigation-bar-wrapper {
  display: block;
  position: absolute;
  padding: 0;
  top: 100%;
  left: 10px;
  right: 10px;
  z-index: 99999;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.06) 0 0 0 3px;
  background: #fff;
  display: none; }

.site-header .navigation-bar-wrapper {
  z-index: 110; }

.navigation-bar-wrapper.active {
  display: block; }

.navigation-bar-wrapper:before,
.navigation-bar-wrapper:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  content: ' ';
  position: absolute;
  top: -10px;
  left: 14px;
  z-index: 10; }

.navigation-bar-wrapper:before {
  border-color: transparent transparent rgba(0, 0, 0, 0.06) transparent;
  border-width: 0 11px 11px 11px;
  top: -14px;
  left: 13px;
  z-index: 7; }

.nav-menu {
  padding: 2em;
  border-bottom: 1px solid #e9edf2; }

.nav-menu:last-child {
  border-bottom: 0; }

ul.nav-menu li > a,
.nav-menu li > a {
  padding: 6px 0;
  font-size: 125%;
  display: inline-block; }

.nav-menu ul ul {
  padding-left: 1em;
  border-left: 1px solid #e9edf2; }

.nav-menu ul .category-list {
  top: auto;
  left: 0;
  padding: 0;
  border: 0; }

.nav-menu.secondary .sub-menu.category-list {
  left: 0; }

.nav-menu ul .category-list select,
.nav-menu ul .category-list .select {
  width: 100%; }

.nav-menu ul ul a {
  font-size: 105%; }

.nav-menu li#categories-mega-menu {
  margin-top: 5px;
  margin-bottom: 5px; }

@media (min-width: 992px) {
  .navigation-bar-wrapper,
  .main-navigation .mega-category-list-wrapper {
    display: block; }
  .primary-header .nav-menu.primary {
    display: table-cell; }
  .navigation-bar-toggle,
  .navigation-bar-wrapper .primary,
  .category-list .postform-wrapper,
  .navigation-bar-wrapper:before,
  .navigation-bar-wrapper:after {
    display: none; }
  .navigation-bar-wrapper {
    position: inherit;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    background: none;
    box-shadow: none;
    padding: 0; }
  .nav-menu,
  ul.nav-menu {
    padding: 0;
    border: 0; }
    .nav-menu.secondary ul.sub-menu li.menu-item-has-children:before,
    .nav-menu.secondary li.menu-item-has-children:after, .nav-menu.tertiary ul.sub-menu li.menu-item-has-children:before,
    .nav-menu.tertiary li.menu-item-has-children:after,
    ul.nav-menu.secondary ul.sub-menu li.menu-item-has-children:before,
    ul.nav-menu.secondary li.menu-item-has-children:after,
    ul.nav-menu.tertiary ul.sub-menu li.menu-item-has-children:before,
    ul.nav-menu.tertiary li.menu-item-has-children:after {
      display: none;
      content: ''; }
    .nav-menu.secondary ul.sub-menu li.menu-item-has-children:after,
    .nav-menu.secondary li.menu-item-has-children:before, .nav-menu.tertiary ul.sub-menu li.menu-item-has-children:after,
    .nav-menu.tertiary li.menu-item-has-children:before,
    ul.nav-menu.secondary ul.sub-menu li.menu-item-has-children:after,
    ul.nav-menu.secondary li.menu-item-has-children:before,
    ul.nav-menu.tertiary ul.sub-menu li.menu-item-has-children:after,
    ul.nav-menu.tertiary li.menu-item-has-children:before {
      display: inline-block;
      font-family: "Ionicons";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      text-rendering: auto;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 20px;
      vertical-align: middle;
      margin-right: 5px;
      margin-top: -1px;
      content: "f3d0"; }
    .nav-menu.secondary ul.sub-menu li.menu-item-has-children:after, .nav-menu.tertiary ul.sub-menu li.menu-item-has-children:after,
    ul.nav-menu.secondary ul.sub-menu li.menu-item-has-children:after,
    ul.nav-menu.tertiary ul.sub-menu li.menu-item-has-children:after {
      content: ""; }
    .nav-menu.secondary ul.sub-menu, .nav-menu.tertiary ul.sub-menu,
    ul.nav-menu.secondary ul.sub-menu,
    ul.nav-menu.tertiary ul.sub-menu {
      right: auto;
      left: -16px; }
      .nav-menu.secondary ul.sub-menu:before, .nav-menu.tertiary ul.sub-menu:before,
      ul.nav-menu.secondary ul.sub-menu:before,
      ul.nav-menu.tertiary ul.sub-menu:before {
        right: auto;
        left: 12px; }
      .nav-menu.secondary ul.sub-menu:after, .nav-menu.tertiary ul.sub-menu:after,
      ul.nav-menu.secondary ul.sub-menu:after,
      ul.nav-menu.tertiary ul.sub-menu:after {
        right: auto;
        left: 13px; }
    .nav-menu.secondary li:hover ul ul, .nav-menu.tertiary li:hover ul ul,
    ul.nav-menu.secondary li:hover ul ul,
    ul.nav-menu.tertiary li:hover ul ul {
      right: auto;
      left: 195px; }
      .nav-menu.secondary li:hover ul ul:after, .nav-menu.secondary li:hover ul ul:before, .nav-menu.tertiary li:hover ul ul:after, .nav-menu.tertiary li:hover ul ul:before,
      ul.nav-menu.secondary li:hover ul ul:after,
      ul.nav-menu.secondary li:hover ul ul:before,
      ul.nav-menu.tertiary li:hover ul ul:after,
      ul.nav-menu.tertiary li:hover ul ul:before {
        right: auto;
        left: -10px;
        top: 8px;
        border-width: 10px 10px 10px 0;
        border-color: transparent #fff transparent transparent; }
      .nav-menu.secondary li:hover ul ul:before, .nav-menu.tertiary li:hover ul ul:before,
      ul.nav-menu.secondary li:hover ul ul:before,
      ul.nav-menu.tertiary li:hover ul ul:before {
        border-width: 11px 11px 11px 0;
        border-color: transparent rgba(0, 0, 0, 0.06) transparent transparent;
        top: 7px;
        right: auto;
        left: -14px; }
    .nav-menu li,
    ul.nav-menu li {
      display: inline-block;
      margin-right: 25px;
      position: relative; }
      .nav-menu li a,
      ul.nav-menu li a {
        font-size: 100%;
        padding: 18px 0;
        display: inline-block; }
        .nav-menu li a:hover,
        ul.nav-menu li a:hover {
          text-decoration: none; }
      .nav-menu li:hover > ul,
      .nav-menu li:hover > ul > ul,
      ul.nav-menu li:hover > ul,
      ul.nav-menu li:hover > ul > ul {
        display: block;
        z-index: 101; }
        .nav-menu li:hover > ul li,
        .nav-menu li:hover > ul > ul li,
        ul.nav-menu li:hover > ul li,
        ul.nav-menu li:hover > ul > ul li {
          display: block;
          margin-right: 0; }
      .nav-menu li:hover ul ul,
      ul.nav-menu li:hover ul ul {
        top: 0;
        margin-top: 0;
        right: 195px;
        left: auto;
        border-radius: 6px; }
        .nav-menu li:hover ul ul:after, .nav-menu li:hover ul ul:before,
        ul.nav-menu li:hover ul ul:after,
        ul.nav-menu li:hover ul ul:before {
          right: -10px;
          top: 6px;
          border-width: 10px 0 10px 10px;
          border-color: transparent transparent transparent #fff; }
        .nav-menu li:hover ul ul:before,
        ul.nav-menu li:hover ul ul:before {
          border-width: 11px 0 11px 11px;
          border-color: transparent transparent transparent rgba(0, 0, 0, 0.06);
          top: 5px;
          right: -14px; }
      .nav-menu li#categories-mega-menu,
      ul.nav-menu li#categories-mega-menu {
        margin-top: 0;
        margin-bottom: 0;
        position: inherit; }
      .nav-menu li[class^=ion] > a,
      ul.nav-menu li[class^=ion] > a {
        margin-left: -22px;
        padding-left: 22px; }
      .nav-menu li[class^=ion]:before,
      ul.nav-menu li[class^=ion]:before {
        margin-top: -2px; }
      .nav-menu li.menu-item-has-children:after,
      ul.nav-menu li.menu-item-has-children:after {
        display: inline-block;
        font-family: "Ionicons";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 20px;
        vertical-align: middle;
        margin-left: 5px;
        margin-top: -1px;
        content: "f3d0"; }
    .nav-menu .sub-menu,
    .nav-menu .children,
    ul.nav-menu .sub-menu,
    ul.nav-menu .children {
      display: none;
      position: absolute;
      padding: 10px 0;
      top: 95%;
      right: -16px;
      z-index: 99999;
      border-radius: 4px;
      width: 200px;
      box-shadow: rgba(0, 0, 0, 0.06) 0 0 0 3px;
      background: #fff;
      border: 0;
      transition: all 0.1s linear; }
      .nav-menu .sub-menu ul,
      .nav-menu .children ul,
      ul.nav-menu .sub-menu ul,
      ul.nav-menu .children ul {
        left: 0;
        right: auto; }
      .nav-menu .sub-menu li:last-child,
      .nav-menu .children li:last-child,
      ul.nav-menu .sub-menu li:last-child,
      ul.nav-menu .children li:last-child {
        border-bottom: 0; }
      .nav-menu .sub-menu li.menu-item-has-children:after,
      .nav-menu .children li.menu-item-has-children:after,
      ul.nav-menu .sub-menu li.menu-item-has-children:after,
      ul.nav-menu .children li.menu-item-has-children:after {
        display: none; }
      .nav-menu .sub-menu a,
      .nav-menu .children a,
      ul.nav-menu .sub-menu a,
      ul.nav-menu .children a {
        margin: 0;
        padding: 6px 22px;
        display: inline-block; }
      .nav-menu .sub-menu li[class^=ion],
      .nav-menu .children li[class^=ion],
      ul.nav-menu .sub-menu li[class^=ion],
      ul.nav-menu .children li[class^=ion] {
        padding-left: 22px; }
        .nav-menu .sub-menu li[class^=ion] > a,
        .nav-menu .children li[class^=ion] > a,
        ul.nav-menu .sub-menu li[class^=ion] > a,
        ul.nav-menu .children li[class^=ion] > a {
          margin-left: 0;
          padding-left: 0; }
      .nav-menu .sub-menu:before, .nav-menu .sub-menu:after,
      .nav-menu .children:before,
      .nav-menu .children:after,
      ul.nav-menu .sub-menu:before,
      ul.nav-menu .sub-menu:after,
      ul.nav-menu .children:before,
      ul.nav-menu .children:after {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #fff transparent;
        content: ' ';
        position: absolute;
        top: -10px;
        right: 13px;
        z-index: 10; }
      .nav-menu .sub-menu:before,
      .nav-menu .children:before,
      ul.nav-menu .sub-menu:before,
      ul.nav-menu .children:before {
        border-color: transparent transparent rgba(0, 0, 0, 0.06) transparent;
        border-width: 0 11px 11px 11px;
        top: -14px;
        right: 12px;
        z-index: 7; }
      .nav-menu .sub-menu.category-list,
      .nav-menu .children.category-list,
      ul.nav-menu .sub-menu.category-list,
      ul.nav-menu .children.category-list {
        left: 0;
        right: 0;
        width: 100%;
        max-height: 500px;
        overflow-y: auto;
        position: absolute;
        box-shadow: rgba(0, 0, 0, 0.1) 2px 1px 0;
        background: #f0f3f6;
        border-radius: 0;
        padding: 30px 0;
        z-index: 10; }
        .nav-menu .sub-menu.category-list:before, .nav-menu .sub-menu.category-list:after,
        .nav-menu .sub-menu.category-list .children:before,
        .nav-menu .sub-menu.category-list .postform,
        .nav-menu .sub-menu.category-list .select,
        .nav-menu .children.category-list:before,
        .nav-menu .children.category-list:after,
        .nav-menu .children.category-list .children:before,
        .nav-menu .children.category-list .postform,
        .nav-menu .children.category-list .select,
        ul.nav-menu .sub-menu.category-list:before,
        ul.nav-menu .sub-menu.category-list:after,
        ul.nav-menu .sub-menu.category-list .children:before,
        ul.nav-menu .sub-menu.category-list .postform,
        ul.nav-menu .sub-menu.category-list .select,
        ul.nav-menu .children.category-list:before,
        ul.nav-menu .children.category-list:after,
        ul.nav-menu .children.category-list .children:before,
        ul.nav-menu .children.category-list .postform,
        ul.nav-menu .children.category-list .select {
          display: none; }
        .nav-menu .sub-menu.category-list a,
        .nav-menu .children.category-list a,
        ul.nav-menu .sub-menu.category-list a,
        ul.nav-menu .children.category-list a {
          padding: 12px 0;
          display: block; }
        .nav-menu .sub-menu.category-list .container,
        .nav-menu .children.category-list .container,
        ul.nav-menu .sub-menu.category-list .container,
        ul.nav-menu .children.category-list .container {
          position: relative; }
          .nav-menu .sub-menu.category-list .container:before,
          .nav-menu .children.category-list .container:before,
          ul.nav-menu .sub-menu.category-list .container:before,
          ul.nav-menu .children.category-list .container:before {
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 10px 10px 0 10px;
            border-color: #fff transparent transparent transparent;
            content: ' ';
            position: absolute;
            top: -30px;
            left: 28px;
            z-index: 10; }
        .nav-menu .sub-menu.category-list .category-count,
        .nav-menu .children.category-list .category-count,
        ul.nav-menu .sub-menu.category-list .category-count,
        ul.nav-menu .children.category-list .category-count {
          font-size: 11px;
          border-radius: 2px;
          margin-right: 8px;
          padding: 4px;
          display: inline-block;
          min-width: 30px;
          text-align: center; }
        .nav-menu .sub-menu.category-list .mega-category-list-wrapper,
        .nav-menu .children.category-list .mega-category-list-wrapper,
        ul.nav-menu .sub-menu.category-list .mega-category-list-wrapper,
        ul.nav-menu .children.category-list .mega-category-list-wrapper {
          max-width: 75%; }
        .nav-menu .sub-menu.category-list li,
        .nav-menu .children.category-list li,
        ul.nav-menu .sub-menu.category-list li,
        ul.nav-menu .children.category-list li {
          width: 23%;
          float: left;
          margin-right: 2%; }

  .nav-menu.primary {
    text-align: right;
    padding-left: 4em; }
  .nav-menu.primary ul ul {
    text-align: left; }
  .nav-menu .account-avatar > a {
    padding: 8px 0; } }

@media (min-width: 992px) {
  .main-navigation--transparent {
    display: none; } }

.nav-menu.tertiary li.current-menu-item a:before,
.nav-menu.tertiary li.is-active a:before {
  content: ' ';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); }

When I click on the Hamburger Icon or the word “Menu” nothing happens.

How can I open the menu on click? Can it be done with just css or with jQuery?

First of all, please rename your class as it is too long to read. And the second is I can’t view your HTML document so I will show you my code. And third, from my experience, You need JavaScript to toggle a menu. See down below.

HTML

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title img src="https://stackoverflow.com/questions/68608641/Capture.PNG" />SoloSoft: Your Bank of Games.</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <link rel="apple-touch-icon" sizes="180x180" href="http://stackoverflow.com/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="http://stackoverflow.com/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="http://stackoverflow.com/favicon-16x16.png">
    <link rel="manifest" href="http://stackoverflow.com/site.webmanifest">
    <link rel="mask-icon" href="http://stackoverflow.com/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
</head>
</h1>

<body>
    <!-- Navbar Section -->

    <nav class="navbar">
        <div class="navbar__container">
            <a href="#home" id="navbar__logo">SoloSoft</a>
            <div class="navbar__toggle" id="mobile-menu">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
            <ul class="navbar__menu">
                <li class="navbar__item">
                    <a href="#home" class="navbar__links" id="home-page">Home</a>
                </li>
                <li class="navbar__item">
                    <a href="about.html" class="navbar__links" id="about-page">About</a>
                </li>
                <li class="navbar__item">
                    <a href="#services" class="navbar__links" id="services-page">Services</a
            >
          </li>
          <li class="navbar__btn">
            <a href="#sign-up" class="button" id="signup">Sign Up</a>
                </li>
            </ul>
        </div>
    </nav>

</body>
</html>

My CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Kumbh Sans', sans-serif;
    scroll-behavior: smooth;
}

.navbar {
    background: #131313;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
}

#navbar__logo {
    background-color: #ff8177;
    background-image: linear-gradient(to top, #6dd5ed, #2193b0);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 2.6rem;
}

.navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
}

.navbar__item {
    height: 80px;
}

.navbar__links {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    text-decoration: none;
    height: 100%;
    transition: all 0.3s ease;
}

.navbar__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background: #2980B9;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #118fa5, #88ccd8, #2980B9);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #118fa5, #88ccd8, #2980B9);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    transition: all 0.3s ease;
}

.navbar__links:hover {
    color: #4eafe7;
    transition: all 0.3s ease;
}

#signup:hover {
    color: #4eafe7;
    transition: all 0.3s ease;
}

@media screen and (max-width: 550px) {
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0;
    }
    .navbar__menu {
        display: grid;
        grid-template-columns: auto;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -1000px;
        opacity: 1;
        transition: all 0.5s ease;
        z-index: -1;
    }
    .navbar__menu.active {
        background: #131313;
        top: 100%;
        opacity: 1;
        transition: all 0.5s ease;
        z-index: 99;
        height: 60vh;
        font-size: 1.6rem;
    }
    #navbar__logo {
        padding-left: 25px;
    }
    .navbar__toggle .bar {
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background: rgb(255, 255, 255);
    }
    .navbar__item {
        width: 100%;
    }
    .navbar__links {
        text-align: center;
        padding: 2rem;
        width: 100%;
        display: table;
    }
    .navbar__btn {
        padding-bottom: 2rem;
    }
    .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80px;
        margin: 0;
    }
    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);
    }
    .navbar__toggle .bar {
        display: block;
        cursor: pointer;
    }
    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

and lastly my JavaScript

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
const navLogo = document.querySelector('#navbar__logo');

// Display Mobile Menu
const mobileMenu = () => {
    menu.classList.toggle('is-active');
    menuLinks.classList.toggle('active');
};

menu.addEventListener('click', mobileMenu);

I don’t think there is any trigger to open the menu in your code?

I use :target to toggle menu:

/* Added open */
#menu:not(:target) {
  display: none; !important;
}

#menu:target {
  display: block !important;
}
/* Added close */

.main-navigation,
.tertiary-navigation {
  background-color: #fff;
  position: relative;
  z-index: 50; }

.tertiary-navigation {
  z-index: 1; }

.navigation-bar-toggle {
  padding: 10px 0;
  display: inline-block;
  vertical-align: middle; }

.navigation-bar-toggle {
  float: left; }

ul.nav-menu [class^="ion"]:before,
.nav-menu [class^="ion"]:before {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 7px;
  margin-top: -5px; }

.main-navigation .mega-category-list-wrapper,
.primary-header .nav-menu.primary {
  display: none;
  vertical-align: middle; }

.nav-menu ul,
.nav-menu {
  margin: 0;
  padding: 0;
  list-style: none; }

.navigation-bar-toggle {
  vertical-align: middle;
  font-size: 15px; }
  
.navigation-bar-toggle i {
  margin-right: 5px;
  vertical-align: middle; }

.navigation-bar-toggle i {
  font-size: 25px; }

.site-header .nav-menu-container,
.site-header .menu {
  display: inline-block; }

.navigation-bar-wrapper {
  display: block;
  position: absolute;
  padding: 0;
  top: 100%;
  left: 10px;
  right: 10px;
  z-index: 99999;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.06) 0 0 0 3px;
  background: #fff;
  display: none; }

.site-header .navigation-bar-wrapper {
  z-index: 110; }

.navigation-bar-wrapper.active {
  display: block; }

.navigation-bar-wrapper:before,
.navigation-bar-wrapper:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  content: ' ';
  position: absolute;
  top: -10px;
  left: 14px;
  z-index: 10; }

.navigation-bar-wrapper:before {
  border-color: transparent transparent rgba(0, 0, 0, 0.06) transparent;
  border-width: 0 11px 11px 11px;
  top: -14px;
  left: 13px;
  z-index: 7; }

.nav-menu {
  padding: 2em;
  border-bottom: 1px solid #e9edf2; }

.nav-menu:last-child {
  border-bottom: 0; }

ul.nav-menu li > a,
.nav-menu li > a {
  padding: 6px 0;
  font-size: 125%;
  display: inline-block; }

.nav-menu ul ul {
  padding-left: 1em;
  border-left: 1px solid #e9edf2; }

.nav-menu ul .category-list {
  top: auto;
  left: 0;
  padding: 0;
  border: 0; }

.nav-menu.secondary .sub-menu.category-list {
  left: 0; }

.nav-menu ul .category-list select,
.nav-menu ul .category-list .select {
  width: 100%; }

.nav-menu ul ul a {
  font-size: 105%; }

.nav-menu li#categories-mega-menu {
  margin-top: 5px;
  margin-bottom: 5px; }

@media (min-width: 992px) {
  .navigation-bar-wrapper,
  .main-navigation .mega-category-list-wrapper {
    display: block; }
  .primary-header .nav-menu.primary {
    display: table-cell; }
  .navigation-bar-toggle,
  .navigation-bar-wrapper .primary,
  .category-list .postform-wrapper,
  .navigation-bar-wrapper:before,
  .navigation-bar-wrapper:after {
    display: none; }
  .navigation-bar-wrapper {
    position: inherit;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    background: none;
    box-shadow: none;
    padding: 0; }
  .nav-menu,
  ul.nav-menu {
    padding: 0;
    border: 0; }
    .nav-menu.secondary ul.sub-menu li.menu-item-has-children:before,
    .nav-menu.secondary li.menu-item-has-children:after, .nav-menu.tertiary ul.sub-menu li.menu-item-has-children:before,
    .nav-menu.tertiary li.menu-item-has-children:after,
    ul.nav-menu.secondary ul.sub-menu li.menu-item-has-children:before,
    ul.nav-menu.secondary li.menu-item-has-children:after,
    ul.nav-menu.tertiary ul.sub-menu li.menu-item-has-children:before,
    ul.nav-menu.tertiary li.menu-item-has-children:after {
      display: none;
      content: ''; }
    .nav-menu.secondary ul.sub-menu li.menu-item-has-children:after,
    .nav-menu.secondary li.menu-item-has-children:before, .nav-menu.tertiary ul.sub-menu li.menu-item-has-children:after,
    .nav-menu.tertiary li.menu-item-has-children:before,
    ul.nav-menu.secondary ul.sub-menu li.menu-item-has-children:after,
    ul.nav-menu.secondary li.menu-item-has-children:before,
    ul.nav-menu.tertiary ul.sub-menu li.menu-item-has-children:after,
    ul.nav-menu.tertiary li.menu-item-has-children:before {
      display: inline-block;
      font-family: "Ionicons";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      text-rendering: auto;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 20px;
      vertical-align: middle;
      margin-right: 5px;
      margin-top: -1px;
      content: "f3d0"; }
    .nav-menu.secondary ul.sub-menu li.menu-item-has-children:after, .nav-menu.tertiary ul.sub-menu li.menu-item-has-children:after,
    ul.nav-menu.secondary ul.sub-menu li.menu-item-has-children:after,
    ul.nav-menu.tertiary ul.sub-menu li.menu-item-has-children:after {
      content: ""; }
    .nav-menu.secondary ul.sub-menu, .nav-menu.tertiary ul.sub-menu,
    ul.nav-menu.secondary ul.sub-menu,
    ul.nav-menu.tertiary ul.sub-menu {
      right: auto;
      left: -16px; }
      .nav-menu.secondary ul.sub-menu:before, .nav-menu.tertiary ul.sub-menu:before,
      ul.nav-menu.secondary ul.sub-menu:before,
      ul.nav-menu.tertiary ul.sub-menu:before {
        right: auto;
        left: 12px; }
      .nav-menu.secondary ul.sub-menu:after, .nav-menu.tertiary ul.sub-menu:after,
      ul.nav-menu.secondary ul.sub-menu:after,
      ul.nav-menu.tertiary ul.sub-menu:after {
        right: auto;
        left: 13px; }
    .nav-menu.secondary li:hover ul ul, .nav-menu.tertiary li:hover ul ul,
    ul.nav-menu.secondary li:hover ul ul,
    ul.nav-menu.tertiary li:hover ul ul {
      right: auto;
      left: 195px; }
      .nav-menu.secondary li:hover ul ul:after, .nav-menu.secondary li:hover ul ul:before, .nav-menu.tertiary li:hover ul ul:after, .nav-menu.tertiary li:hover ul ul:before,
      ul.nav-menu.secondary li:hover ul ul:after,
      ul.nav-menu.secondary li:hover ul ul:before,
      ul.nav-menu.tertiary li:hover ul ul:after,
      ul.nav-menu.tertiary li:hover ul ul:before {
        right: auto;
        left: -10px;
        top: 8px;
        border-width: 10px 10px 10px 0;
        border-color: transparent #fff transparent transparent; }
      .nav-menu.secondary li:hover ul ul:before, .nav-menu.tertiary li:hover ul ul:before,
      ul.nav-menu.secondary li:hover ul ul:before,
      ul.nav-menu.tertiary li:hover ul ul:before {
        border-width: 11px 11px 11px 0;
        border-color: transparent rgba(0, 0, 0, 0.06) transparent transparent;
        top: 7px;
        right: auto;
        left: -14px; }
    .nav-menu li,
    ul.nav-menu li {
      display: inline-block;
      margin-right: 25px;
      position: relative; }
      .nav-menu li a,
      ul.nav-menu li a {
        font-size: 100%;
        padding: 18px 0;
        display: inline-block; }
        .nav-menu li a:hover,
        ul.nav-menu li a:hover {
          text-decoration: none; }
      .nav-menu li:hover > ul,
      .nav-menu li:hover > ul > ul,
      ul.nav-menu li:hover > ul,
      ul.nav-menu li:hover > ul > ul {
        display: block;
        z-index: 101; }
        .nav-menu li:hover > ul li,
        .nav-menu li:hover > ul > ul li,
        ul.nav-menu li:hover > ul li,
        ul.nav-menu li:hover > ul > ul li {
          display: block;
          margin-right: 0; }
      .nav-menu li:hover ul ul,
      ul.nav-menu li:hover ul ul {
        top: 0;
        margin-top: 0;
        right: 195px;
        left: auto;
        border-radius: 6px; }
        .nav-menu li:hover ul ul:after, .nav-menu li:hover ul ul:before,
        ul.nav-menu li:hover ul ul:after,
        ul.nav-menu li:hover ul ul:before {
          right: -10px;
          top: 6px;
          border-width: 10px 0 10px 10px;
          border-color: transparent transparent transparent #fff; }
        .nav-menu li:hover ul ul:before,
        ul.nav-menu li:hover ul ul:before {
          border-width: 11px 0 11px 11px;
          border-color: transparent transparent transparent rgba(0, 0, 0, 0.06);
          top: 5px;
          right: -14px; }
      .nav-menu li#categories-mega-menu,
      ul.nav-menu li#categories-mega-menu {
        margin-top: 0;
        margin-bottom: 0;
        position: inherit; }
      .nav-menu li[class^=ion] > a,
      ul.nav-menu li[class^=ion] > a {
        margin-left: -22px;
        padding-left: 22px; }
      .nav-menu li[class^=ion]:before,
      ul.nav-menu li[class^=ion]:before {
        margin-top: -2px; }
      .nav-menu li.menu-item-has-children:after,
      ul.nav-menu li.menu-item-has-children:after {
        display: inline-block;
        font-family: "Ionicons";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 20px;
        vertical-align: middle;
        margin-left: 5px;
        margin-top: -1px;
        content: "f3d0"; }
    .nav-menu .sub-menu,
    .nav-menu .children,
    ul.nav-menu .sub-menu,
    ul.nav-menu .children {
      display: none;
      position: absolute;
      padding: 10px 0;
      top: 95%;
      right: -16px;
      z-index: 99999;
      border-radius: 4px;
      width: 200px;
      box-shadow: rgba(0, 0, 0, 0.06) 0 0 0 3px;
      background: #fff;
      border: 0;
      transition: all 0.1s linear; }
      .nav-menu .sub-menu ul,
      .nav-menu .children ul,
      ul.nav-menu .sub-menu ul,
      ul.nav-menu .children ul {
        left: 0;
        right: auto; }
      .nav-menu .sub-menu li:last-child,
      .nav-menu .children li:last-child,
      ul.nav-menu .sub-menu li:last-child,
      ul.nav-menu .children li:last-child {
        border-bottom: 0; }
      .nav-menu .sub-menu li.menu-item-has-children:after,
      .nav-menu .children li.menu-item-has-children:after,
      ul.nav-menu .sub-menu li.menu-item-has-children:after,
      ul.nav-menu .children li.menu-item-has-children:after {
        display: none; }
      .nav-menu .sub-menu a,
      .nav-menu .children a,
      ul.nav-menu .sub-menu a,
      ul.nav-menu .children a {
        margin: 0;
        padding: 6px 22px;
        display: inline-block; }
      .nav-menu .sub-menu li[class^=ion],
      .nav-menu .children li[class^=ion],
      ul.nav-menu .sub-menu li[class^=ion],
      ul.nav-menu .children li[class^=ion] {
        padding-left: 22px; }
        .nav-menu .sub-menu li[class^=ion] > a,
        .nav-menu .children li[class^=ion] > a,
        ul.nav-menu .sub-menu li[class^=ion] > a,
        ul.nav-menu .children li[class^=ion] > a {
          margin-left: 0;
          padding-left: 0; }
      .nav-menu .sub-menu:before, .nav-menu .sub-menu:after,
      .nav-menu .children:before,
      .nav-menu .children:after,
      ul.nav-menu .sub-menu:before,
      ul.nav-menu .sub-menu:after,
      ul.nav-menu .children:before,
      ul.nav-menu .children:after {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #fff transparent;
        content: ' ';
        position: absolute;
        top: -10px;
        right: 13px;
        z-index: 10; }
      .nav-menu .sub-menu:before,
      .nav-menu .children:before,
      ul.nav-menu .sub-menu:before,
      ul.nav-menu .children:before {
        border-color: transparent transparent rgba(0, 0, 0, 0.06) transparent;
        border-width: 0 11px 11px 11px;
        top: -14px;
        right: 12px;
        z-index: 7; }
      .nav-menu .sub-menu.category-list,
      .nav-menu .children.category-list,
      ul.nav-menu .sub-menu.category-list,
      ul.nav-menu .children.category-list {
        left: 0;
        right: 0;
        width: 100%;
        max-height: 500px;
        overflow-y: auto;
        position: absolute;
        box-shadow: rgba(0, 0, 0, 0.1) 2px 1px 0;
        background: #f0f3f6;
        border-radius: 0;
        padding: 30px 0;
        z-index: 10; }
        .nav-menu .sub-menu.category-list:before, .nav-menu .sub-menu.category-list:after,
        .nav-menu .sub-menu.category-list .children:before,
        .nav-menu .sub-menu.category-list .postform,
        .nav-menu .sub-menu.category-list .select,
        .nav-menu .children.category-list:before,
        .nav-menu .children.category-list:after,
        .nav-menu .children.category-list .children:before,
        .nav-menu .children.category-list .postform,
        .nav-menu .children.category-list .select,
        ul.nav-menu .sub-menu.category-list:before,
        ul.nav-menu .sub-menu.category-list:after,
        ul.nav-menu .sub-menu.category-list .children:before,
        ul.nav-menu .sub-menu.category-list .postform,
        ul.nav-menu .sub-menu.category-list .select,
        ul.nav-menu .children.category-list:before,
        ul.nav-menu .children.category-list:after,
        ul.nav-menu .children.category-list .children:before,
        ul.nav-menu .children.category-list .postform,
        ul.nav-menu .children.category-list .select {
          display: none; }
        .nav-menu .sub-menu.category-list a,
        .nav-menu .children.category-list a,
        ul.nav-menu .sub-menu.category-list a,
        ul.nav-menu .children.category-list a {
          padding: 12px 0;
          display: block; }
        .nav-menu .sub-menu.category-list .container,
        .nav-menu .children.category-list .container,
        ul.nav-menu .sub-menu.category-list .container,
        ul.nav-menu .children.category-list .container {
          position: relative; }
          .nav-menu .sub-menu.category-list .container:before,
          .nav-menu .children.category-list .container:before,
          ul.nav-menu .sub-menu.category-list .container:before,
          ul.nav-menu .children.category-list .container:before {
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 10px 10px 0 10px;
            border-color: #fff transparent transparent transparent;
            content: ' ';
            position: absolute;
            top: -30px;
            left: 28px;
            z-index: 10; }
        .nav-menu .sub-menu.category-list .category-count,
        .nav-menu .children.category-list .category-count,
        ul.nav-menu .sub-menu.category-list .category-count,
        ul.nav-menu .children.category-list .category-count {
          font-size: 11px;
          border-radius: 2px;
          margin-right: 8px;
          padding: 4px;
          display: inline-block;
          min-width: 30px;
          text-align: center; }
        .nav-menu .sub-menu.category-list .mega-category-list-wrapper,
        .nav-menu .children.category-list .mega-category-list-wrapper,
        ul.nav-menu .sub-menu.category-list .mega-category-list-wrapper,
        ul.nav-menu .children.category-list .mega-category-list-wrapper {
          max-width: 75%; }
        .nav-menu .sub-menu.category-list li,
        .nav-menu .children.category-list li,
        ul.nav-menu .sub-menu.category-list li,
        ul.nav-menu .children.category-list li {
          width: 23%;
          float: left;
          margin-right: 2%; }

  .nav-menu.primary {
    text-align: right;
    padding-left: 4em; }
  .nav-menu.primary ul ul {
    text-align: left; }
  .nav-menu .account-avatar > a {
    padding: 8px 0; } }

@media (min-width: 992px) {
  .main-navigation--transparent {
    display: none; } }

.nav-menu.tertiary li.current-menu-item a:before,
.nav-menu.tertiary li.is-active a:before {
  content: ' ';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); }
<nav id="site-navigation" class="main-navigation main-navigation--default">
  <div class="container">
    <a href="#menu" class="navigation-bar-toggle"> <!-- Added href -->
      <i class="ion-navicon-round"></i>
      <span class="mobile-nav-menu-label">Menu</span>
    </a>
    <div id="menu" class="navigation-bar-wrapper"><a href="#">Close</a> <!-- Added a -->
      <div class="primary nav-menu">
        <ul id="menu-menu-1" class="primary nav-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-107 current_page_item menu-item-has-children menu-item-182"><a href="https://example.com">Homepage</a>
            <ul class="sub-menu">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-820"><a href="https://example.com/service1">Service 1</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-823"><a href="https://example.com/service2">Service 2</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-818"><a href="https://example.com/service3">Service 3</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-821"><a href="https://example.com/service4">Service 4</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-822"><a href="https://example.com/service5">Service 5</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="https://example.com/about">About</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-184"><a href="https://example.com/contact">Contact</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-185"><a href="https://example.com/privacy">Privacy</a></li>
        </ul>
      </div>            
    </div>
  </div>
</nav>