Hamburger Menu & Editing Mobile View

[MadameButterfly]

Hi Guys, 

I need help with the following please: 

The header on my website currently looks like this on mobile:

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 

[GiantFocal]

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. 

[Anton · Accepted solution]

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