Introduction

If you want to add a menu to a navbar, you only have to add the menu as an unordered list with links. This script will take care of the rest. It will show the links in an inline-setting and show a hamburger with the word ‘MENU’ next to it. When you press the menu, the list items will appear below each other and the button will change into an ‘X’.

How it works

Create a navigation bar and add id="mobile-menu" to it. Inside this item, create an unordered list with links. Add the script to the footer to take care of the rest. The script will toggle the mobile menu at the window width defined in the width variable. You can change the break point to suit your needs. The hamburger icon and the close icon are being generated by pseudo elements. No image is being used.

[expand]

<div id="mobile-menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

Or use simple-menu.html:

<div id="mobile-menu">
  {% include simple-menu %}
</div>

If you have trouble implementing this, you can also check this universal Codepen example.

[/expand]

Installation

Step 1. Download the file mobile-menu.html
Step 2. Save the file in the ‘_includes’ directory of your project
Step 3. Make sure the bottom of your layout document looks like this:

...
<script src="/js/jquery.min.js"></script>
{% include mobile-menu.html color="#777777" width="757" %}
</body>
</html>