How to create a hamburger menu?

Develop, Build & Integrate CMS Development
1

Good morning,

I am working on this Landing Page:

https://slimstock-hubspot-training-environment-slimstock-21250940.hs-sites.com/landing-jaume

I have made a menu with anchors with the “Rich Text” module:

<p><a href="http://slimstock-hubspot-training-environment-slimstock-21250940.hs-sites.com/landing-jaume/#section01" rel="noopener"><span class="menu-text">Section One</span></a> <a href="http://slimstock-hubspot-training-environment-slimstock-21250940.hs-sites.com/landing-jaume/#section02" rel="noopener"><span class="menu-text">Section Two</span></a> <a href="http://slimstock-hubspot-training-environment-slimstock-21250940.hs-sites.com/landing-jaume/#section03" rel="noopener"><span class="menu-text-last">Section Three</span></a></p>

I have seen this thread and I don’t understand how to implement it in my landing page.

https://community.hubspot.com/t5/CMS-Development/How-to-make-header-menu-quot-hamburger-quot-style-in-mobile-view/m-p/452802#M23846

I need your technical support to adapt this simple menu to hamburger menu for tablet (Portrait) and mobile device.

Thank you very much for your technical support.

2

Hi @JCastells

there are many ways how to implement a hamburger menu.

By default every theme should have one - unless it’s only a landing page theme. This is becuase landing pages should not have a menu since this is a potential exit point which is bad for conversion.

The boilerplate has a burger menu implemented. So unless you want to code it from the ground up yourself, you can copy/paste the elements to your theme.

Another way could be creating your own burger menu but this can be very time consuming.

Here’s a very basic idea for a custom module

{% require_css %}
.mobile{
display:block;
}
.desktop, .mobile-menu{
display:none;
}

@media screen and (min-width:1025px){
.desktop{
display:block;}

.mobile, mobile-menu{
display:none;
}
}
{% end_require_css %}

<header class="desktop">
{# content for desktop header #}
</header>
<header class="mobile">
{# content for mobile header #}
<i class="fas fa-bars" id="nav-toggle"></i>
<nav id="mobile-menu">
{% module 'mobileMenu' path="@hubspot/menu", no_wrapper=True %}
</nav>
</header>

{% require_js %}
{# place jQuery here if you don't have it in your theme #}
$('#nav-toggle').click(function({
$(nav#mobile-menu).css('display', 'block');
}));
{% end_require_js %}

best,

Anton