avasssso avasssso - 4 months ago 25
CSS Question

trigger hamburger button to make menu responsive

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:
enter image description here

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

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