trigger hamburger button to make menu responsive

Question

I am in the process of tryig to make my menu responsive by using a hamburger button from this library https://jonsuh.com/hamburgers/

I have the button showing up on my screen but I am not sure what jquery I should use to connect the button to my menu and how to trigger it when there are different screen sizes.

this is what is currently looks like:

here is my html:

  <header id="header" role="banner">
    <div class="header-inner">

        <div id="logoWrapper" class="title-logo-wrapper">
            <div id="logoImage" class="logo-image">
                <a href="#">
                    <img src="./images/zipzap.png" alt="">
                </a>
            </div>
        </div>
        <div id="headerNav">
            <div id="mainNavWrapper" class="nav-wrapper">
            <button class="hamburger hamburger--collapse is-active" type="button">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
                <nav id="mainNavigation">
                <ul>
                    <li class="navigation-item">
                      <a href="#">Home</a>                          
                    </li>
                     <li class="navigation-item">
                      <a href="#">Our Team</a>                          
                      </li>
                     <li class="navigation-item" id="media">
                      <a href="#">Media</a>                          
                     </li>
                     <!-- Logo-->
                    <li class="navigation-item" id="about">
                      <a href="#">About Us</a>                          
                    </li>
                    <li class="navigation-item">
                      <a href="#">Contact Us</a>                          
                     </li>
                     <li class="navigation-item" id="donate">
                      <a href="#">Support Us</a>                          
                      </li>
                    </ul>

                </nav>
            </div>
        </div>
    </div>
</header>

and here is my jquery

 var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
    $hamburger.toggleClass("is-active");

  });

don't know if this helps but here is my css

#donate{
    background-color: #7ED321;
    border-radius: 8px;
}

#header {
     padding: 0 18px;
    position: relative;
}


.header-inner {
    padding: 18px 0;
}

#header #logoWrapper, #header #siteTitleWrapper {
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    text-align: center;
}

#header #logoWrapper, #header #siteTitleWrapper, #header #headerNav {
    display: inline-block;
    vertical-align: middle;
}

#mainNavWrapper nav a, #mainNavWrapper nav a:visited {
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:15px;
}

#mainNavigation li{
    display:inline;

Any help would be appreciated!

Answer 1

General idea is to hide navigation on smaller screens and show on button click.

Basic example (you can apply it to your design):

HTML:

<a href="#" id="toggle-menu">Toggle menu</a>
<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li><a href="#">Separated link</a></li>
  <li><a href="#">One more separated link</a></li>
</ul>

CSS:

ul {
  display: none;
}
li {
  list-style: none;
  display: inline-block;
  padding: 0 10px;
}
a {
  text-decoration: none;
  color: #333;
}
@media (min-width: 800px) {
  ul {
    display: block;
  }
  #toggle-menu {
    display: none;
  }
}
@media (max-width: 800px) {
  ul.active {
    display: block;
  }
  ul.active li {
    display: block;
  }
}

JS:

$('#toggle-menu').click(function(e) {
  e.preventDefault();
  $('ul').toggleClass('active');
});

CODEPEN