# Hamburger Menu & Editing Mobile View

**URL:** <https://community.hubspot.com/t/hamburger-menu-editing-mobile-view/115695>\
**Category:** CMS Development\
**Tags:** free\
**Created:** [September 3, 2024, 1:18pm UTC](https://community.hubspot.com/t/hamburger-menu-editing-mobile-view/115695 "2024-09-03T13:18:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MadameButterfly](https://avatars.discourse-cdn.com/v4/letter/m/50afbb/32.png) [@MadameButterfly](https://community.hubspot.com/u/MadameButterfly)\
**Post date:** [September 3, 2024, 1:18pm UTC](https://community.hubspot.com/t/hamburger-menu-editing-mobile-view/115695/1 "2024-09-03T13:18:06Z")

</div>

Hi Guys,  
I need help with the following please:  
The header on my website currently looks like this on mobile:

 ![MadameButterfly_1-1725368955877.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/f/ffffa8bbfd16526f96443475f02f507c2f3fdbed.png)

I need help adding a hamburger menu next to my logo or I need assistance putting the original menu items on 1 line so that its not stacked.  
Thanks,  
Sonali

---

<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:** [September 3, 2024, 2:12pm UTC](https://community.hubspot.com/t/hamburger-menu-editing-mobile-view/115695/2 "2024-09-03T14:12:25Z")

</div>

Hi @MadameButterfly,  
in order to implement a burger, you will need to edit (at least) following files:

- a CSS(most likely the header.css)
- header.html (global partial)
- your JavaScript file (if you don’t want to make a pure CSS burger menu)

My personal approach is to have something like this:

header.html:

```lia-code-sample
{# Desktop header #}
<header class="desktop-header">
 <div class="inner-wrapper">
 <div class="logo-wrapper">
 <a href="{{ brand_settings.primaryLogo.link }}">
 <img src="{{ brand_settings.primaryLogo.src }}" alt="{{ brand_settings.primaryLogo.alt }}" aria-label="{{ brand_settings.primaryLogo.alt }}" class="logo">
 </a>
 </div>
 <div class="navigation-wrapper">
 {% module 'main_navigation' path="@hubspot/menu", label="Main navigation" %}
 </div>
 </div>
</header>

{# Mobile header #}
<header class="mobile-header">
 <div class="inner-wrapper">
 <div class="logo-wrapper">
 <a href="{{ brand_settings.primaryLogo.link }}">
 <img src="{{ brand_settings.primaryLogo.src }}" alt="{{ brand_settings.primaryLogo.alt }}" aria-label="{{ brand_settings.primaryLogo.alt }}" class="logo">
 </a>
 </div>
 <div class="navigation-wrapper">
 <i class="mobile-nav-trigger"></i>
 <div class="main-nav">
 {% module 'main_navigation' path="@hubspot/menu", label="Main navigation" %} 
 </div>
 </div>
 </div>
</header>

```

header.css(which is getting included in the main.css which is getting loaded before the theme-overrides.css)

```lia-code-sample
.mobile-header{
 display:block;
 width:100vw;
}

.desktop-header{
 display:none;
}

.mobile-header .main-nav{
 display:none;
}

.mobile-header .main-nav.open{
 display:block;
}

@media screen and (min-width:1024px){
.mobile-header{
 display:none;
}

.desktop-header{
 display:block;
 width:100vw;
}
}

```

the JS(which is also being loaded in the main theme file):

```lia-code-sample
const mobileTrigger = document.querySelector('.mobile-nav-trigger');
const mainNav = document.querySelector('.main-nav');

mobileTrigger.addEventListener('click', function() {
 mainNav.classList.toggle('open');
});

```

Depending on various variables like

- the theme you’re using
- your desired functionality
- …

it might be more to it than the code above.

Also - if you need dev support, feel free to drop me a DM

best,

Anton

---

<div class="post-metadata">

**Author:** ![GiantFocal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/giantfocal/32/41969_2.png) [@GiantFocal](https://community.hubspot.com/u/GiantFocal)\
**Post date:** [September 4, 2024, 3:15am UTC](https://community.hubspot.com/t/hamburger-menu-editing-mobile-view/115695/3 "2024-09-04T03:15:43Z")

</div>

Hi @MadameButterfly,

The implementation depends on how the website and the header are developed.

This involves updating the header, adding CSS and JS, and fixing conflicts with existing CSS/JS (if applicable); there is no single “copy-paste” solution for this.

If you need help with the implementation, feel free to contact us.