Hamburger Menu & Editing Mobile View

Develop, Build & Integrate CMS Development
1

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

MadameButterfly_1-1725368955877.png
MadameButterfly_1-1725368955877.png457×393 23.9 KB

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

2

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:

{# 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)

.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):

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

3

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.