# How to create a hamburger menu?

**URL:** <https://community.hubspot.com/t/how-to-create-a-hamburger-menu/68691>\
**Category:** CMS Development\
**Tags:** html\
**Created:** [November 7, 2022, 9:36am UTC](https://community.hubspot.com/t/how-to-create-a-hamburger-menu/68691 "2022-11-07T09:36:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JCastells](https://avatars.discourse-cdn.com/v4/letter/j/48db29/32.png) [@JCastells](https://community.hubspot.com/u/JCastells)\
**Post date:** [November 7, 2022, 9:36am UTC](https://community.hubspot.com/t/how-to-create-a-hamburger-menu/68691/1 "2022-11-07T09:36:30Z")

</div>

Good morning,

I am working on this Landing Page:

[https://slimstock-hubspot-training-environment-slimstock-21250940.hs-sites.com/landing-jaume](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](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.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [November 7, 2022, 4:07pm UTC](https://community.hubspot.com/t/how-to-create-a-hamburger-menu/68691/2 "2022-11-07T16:07:03Z")

</div>

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](https://developers.hubspot.com/docs/cms/building-blocks/themes/hubspot-cms-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

```lia-code-sample
{% 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