How can we use a hamburger for the main navigation?

[craigc11]

Im looking to set up the primary navigation on Desktop as a humburger menu, similar to how it works as standard on mobile. 

Tried a few different methods, but currently I can only get it to work as a dropdown. 

Image example as to what I need.

Thanks

[Anton · Accepted solution]

Hi @craigc11, 

you'll need to create either a custom module or (better) a so-called global_partial.

The basic layout could look like this

<header class="headerWrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
{{logo}}
</div>
<nav class="span10">
<img src="PATH-TO-BURGER-IMAGE" alt="burger icon" id="menuToggle">
<div class="menuWrapper" id="burgerMenu">
{% module "menu" path="@hubspot/menu", label="Footer Menu",
      no_wrapper=True %}
</div>
</nav>
</div>
</div>
</header>

{% require_js %} {# you can put this into a JS file which will be loaded on every page; jQuery required #}
<script>
$("#menuToggle").click(function () {
  $("#burgerMenu").toggleClass("visible");
});
</script>
{% end_require_js %}

{% require_css %} {# you can put this into a CSS file which will be loaded on every page #}
<style>
#burgerMenu{
display:none
}
#burgerMenu.visible{
display:block;
}
{# MORE-CSS-STYLING #}
</style>
{% end_require_css %}

hope this helps, 

best, 

Anton