How to Create a Hamburger Menu for Mobile Devices.

The hamburger menu streamlines screen layouts; in this article, you will learn how to create a fancy collapsible menu for your smartphones/tablets with a few lines of custom code.

Instructional Video: https://www.loom.com/share/5ff56646b7ab426882926f4702dcc0c2

Video Summary:
Clone the top section, set one to Desktop and the other to Mobile; once you are on the mobile view, add two rows with an HTML/JS element each.

Add the snippet code below to the HTML/JS element on top; Replacing both "#row--id" with yours is required.

<script>
  $("#your--row--id").click(function() {
    $("#your-row--id").toggle();
  });
</script>

It's possible the code doesn't work when copied from the text block above; if so, you can Click Here to Copy Code from a document.

Add the code below to the second HTML/JS element and update the code with your links and elements ids.

<div class="nav-mobile">
  <ul>
    <li><a href="https://twocommaclub.com/theawards">Two Comma Club</a></li>
    <li><a href="element--id">Testimonials</a></li>
    <li><a href="element--id">Contact Us</a></li>
  </ul>
</div>
<style>
  ul {
     list-style-type: none; 
  }
  ul a {
    font: ubuntu;
    color: white;
    padding: 10px 10px;
    font-size: 17px;
    display: block;
  }
  </style>

It's possible the code doesn't work when copied from the text block above; if so, you can Click Here to Copy Code from a document.

Hide the second row, make sure to SAVE, test out and enjoy it.

Important: Due to the custom and varying nature of custom code, our support team cannot assist with any custom code added to your page. If you experience troubles while setting up your custom code, please consult a qualified developer to help you.

Current App Status

How to Create a Hamburger Menu for Mobile Devices.

Comments

Try ClickFunnels For Free: