How can we use a hamburger for the main navigation?

craigc11 — Tue, 12 Sep 2023 13:04:08 GMT

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

Re: How can we use a hamburger for the main navigation?

Anton — Tue, 12 Sep 2023 22:27:37 GMT

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

topic Re: How can we use a hamburger for the main navigation? in CMS Development

How can we use a hamburger for the main navigation?

Re: How can we use a hamburger for the main navigation?