How to implement a mobile navigation menu

A simple and clean navigation is essential to a well designed website. One size, however, does not necessarily fit all. This document will walk you through adding a built in toggle javascript navigation that will replace your standard navigation responsively when your site is being viewed on mobile screens, like the image above. This solution is integrated with the Site Maps tool, so that menu items remain easy to edit.

Once installed you may need to address styling issues so the navigation matches your site. Additionally, !important tags used in the desktop navigation may carry over.

Add custom class to Advanced Menu module

Navigate to the Menu module of the Template where you would like to implement the mobile navigation.
Click the gear icon on the menu module, choose Edit CSS, and add the class "custom-menu-primary" in the Custom CSS Class (advanced) section.
Click Publish Changes on the template.

Add or replace mobile navigation Javascript

Navigate to Template Builder > Code > Custom > Page > company_theme > CompanyMain.js.

If you do not have a CompanyMain.js file you will need to create one by following these steps:

In the Template Builder, click the "New" button at the top of the page
Choose "Code Editor" and "Page" and hit "Create"
Name the file "CompanyMain.js" (do not use the name of your company instead of the generic CompanyMain.js)
Click Save

In the .js file add this code or replace it for any pre-existing mobile nav script:


$(function() {

    /** 
     * Mobile Nav
     *
     * Hubspot Standard Toggle Menu
     */

    $('.custom-menu-primary').addClass('js-enabled');
    
    /* Mobile button with three lines icon */
        $('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger"><i></i></div>');
        
    /* Uncomment for mobile button that says 'MENU' 
        $('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger">MENU</div>');
    */
    
    $('.custom-menu-primary .flyouts .hs-item-has-children > a').after(' <div class="child-trigger"><i></i></div>');
    $('.mobile-trigger').click(function() {
        $(this).next('.custom-menu-primary .hs-menu-wrapper').slideToggle(250);
        $('body').toggleClass('mobile-open');
        $('.child-trigger').removeClass('child-open');
        $('.hs-menu-children-wrapper').slideUp(250);
        return false;
     });

    $('.child-trigger').click(function() {
        $(this).parent().siblings('.hs-item-has-children').find('.child-trigger').removeClass('child-open');
        $(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
        $(this).next('.hs-menu-children-wrapper').slideToggle(250);
        $(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
        $(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.child-trigger').removeClass('child-open');
        $(this).toggleClass('child-open');
        return false;
    });

});

After publishing the file, click the Actions button and choose Get public URL. Copy the public url.

Reference the script in footer of template

While you could link the script to your entire site by adding with content settings, it is recommended that you only apply it to templates that require this mobile menu. This reduced the likelihood of conflicts, when using different themes within the same account.

To edit the footer of a template:

Locate one of your template layouts in Design Manager
Click the gear icon on the global footer and choose Edit Group
If there is not already a HTML module that contains Javascript files, add an HTML module, click its gear icon, and choose Edit options. If there is a existing module, click the gear icon > Edit options.
Write a script tag, and paste in the public URL as its source. See demo and example code below:


    <script src='{{ get_public_template_url("custom/page/Company_Theme/CompanyMain.js") }}'></script>

Style the mobile menu

Navigate to your CSS stylesheet.
Find the "Mobile Menu" section and replace it with the following code.
If you do not already have a "Mobile Menu" section simply paste this code at the end of your stylesheet:


/* ==========================================================================
   Custom Menu Primary
   ========================================================================== */


{% set ulColor       = "" %} /* Set ul background color */
{% set liColor       = "" %} /* Set li background Color */
{% set aColor        = "" %} /* Set link Color */
{% set aColorHover   = "" %} /* Set link Hover Color */

/* Parent List */
.custom-menu-primary .hs-menu-wrapper > ul{ 
  background:{{ ulColor }};
}
.custom-menu-primary .hs-menu-wrapper > ul > li{
  background:{{ liColor }};
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a{
  color:{{ aColor }};
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{
  color:{{ aColorHover }};
}

/* Child List */
.custom-menu-primary .hs-menu-wrapper > ul ul{}
.custom-menu-primary .hs-menu-wrapper > ul ul li{
  background:{{ liColor }};
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{
  color:{{ aColor }};
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{
  color:{{ aColorHover }};
}

/* Override max width on menu links */
.custom-menu-primary .hs-menu-wrapper > ul li a, 
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
}

/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width:768px) {
      .custom-menu-primary .hs-menu-wrapper { 
          display:block !important;
      }
  }




/* ==========================================================================
   Mobile Menu - Hubspot Standard Toggle Menu
   ========================================================================== */


/**
 * Special Note
 *
 * When the menu is open, a class of .mobile-open is applied to the body. You can 
 * use this for custom styling on any element when the menu is in the open position.                     
 */

.mobile-trigger, .child-trigger{
    display: none; /* Hide button on Desktop */
}

@media (max-width: 767px){


  /* Variables
     ========================================================================== */

  {% set menuColorMobile = "#000000" %}   /* Set Mobile Menu Background Color */
  {% set aColorMobile = "#ffffff" %}      /* Set Link Color */
  {% set aColorHoverMobile = "#ffffff" %} /* Set Link Hover Color */

  /* 
    * Menu Reset
    *
    * Remove styling from desktop version of custom-menu-primary. Place any 
    * additional CSS you want removed from the mobile menu in this reset 
    */

  .custom-menu-primary,
  .custom-menu-primary .hs-menu-wrapper > ul,
  .custom-menu-primary .hs-menu-wrapper > ul li,
  .custom-menu-primary .hs-menu-wrapper > ul li a{
    display: block;
    float: none;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    padding: 0px;
    margin: 0px;
    background-image: none;
    background-color: transparent;
    border: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none; 
    max-width: none;
    width: 100%;
    height: auto;
    line-height: 1;  
    font-weight: normal;
    text-decoration: none;
    text-indent: 0px;
    text-align: left;
    color:{{aColorMobile}};
  }


  /* Toggle Button
     ========================================================================== */

  .mobile-trigger{
    display: inline-block !important; /* Show button on mobile */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute; /*******************************************/
    top: 0px;          /* Position Button at right of screen  */
    right: 10px;        /*******************************************/
    width: auto; /* Button width */
    height: auto; /* Button height */      
    padding: 7px 10px 8px 10px;
    background: #ffffff; /* Background color */
    border: 1px solid {{ menuColorMobile }};
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: {{ menuColorMobile }}; 
  }
  .mobile-trigger:hover{
    text-decoration: none; /* Removes link text underline on button */
    color:{{ aColorHoverMobile }};
    background-color: {{ menuColorMobile }}; 
    border-color: transparent;
  }

  /* Change button when menu is open */
  .mobile-open .mobile-trigger{
    color:{{ aColorHoverMobile }};
    background-color: {{ menuColorMobile }}; 
    border-color: transparent;
  }


  /* Toggle Button Icon
     ========================================================================== */

  .mobile-trigger i{
    display: inline;
    position: relative;
    top: -4px;
  }
  .mobile-trigger i:before, .mobile-trigger i:after{
    position: absolute;
    content: '';
  }
  .mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after{
    width: 22px; /* Icon line width */
    height: 2px; /* Icon line height */
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background-color: {{ menuColorMobile }}; /* Icon color */
    display: inline-block;
  }
  .mobile-trigger i:before{
    top: -6px; /* Position top line */
  }
  .mobile-trigger i:after{
    top: 6px; /* Position bottom line */
  }
  
  .mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after,  
  .mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after{
      background-color: {{ aColorHoverMobile }}; /* Icon color */
  }


  /* Child Toggle Button
     ========================================================================== */

  .child-trigger{
    display: block !important; /* Hide button on Desktop */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute;
    top: 0px;
    right: 0px;
    width: 55px !important; /* Button width */
    min-width: 55px !important;
    height: 45px !important; /* Button height */  
    padding: 0 !important;
    border-left: 1px dotted rgba(255, 255, 255, .20);
  }
  .child-trigger:hover{
    text-decoration: none;
  }
  .child-trigger i{
    position: relative;
    top: 50%; /* Centers icon inside button */
    margin: 0 auto !important;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .child-trigger i:after{
    position: absolute;
    content: '';
  }
  .child-trigger i, .child-trigger i:after{
    width: 10px; /* Icon line width */
    height: 1px; /* Icon line height */
    background-color:{{ aColorMobile }}; /* Icon color */
    display: block;

  }
  .child-trigger i:after{
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .child-trigger.child-open i:after{
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  .child-trigger.child-open i{
  }

    
  /* Menu Styles on Mobile Devices
     ========================================================================== */  
     
   .custom-menu-primary.js-enabled{
       position: relative;
       padding-top: 44px; /* Makes room for button */
       margin: 10px 0 10px 0;
   }

  /* Hide menu on mobile */
  .custom-menu-primary.js-enabled .hs-menu-wrapper,
  .custom-menu-primary.js-enabled .hs-menu-children-wrapper{
    display: none;
  }  

  /* Make child lists appear below parent items */
  .custom-menu-primary ul.hs-menu-children-wrapper{
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    display: none;
  }

  /* Mobile Menu Styles */ 
  .custom-menu-primary.js-enabled .hs-menu-wrapper{
    width: 100%;
    position: relative; /**************************************************************/
    top: 0;             /* Positions the menu to drop from the very top of the screen */
    left: 0;          /**************************************************************/
    padding: 0;
  }
  .custom-menu-primary .hs-menu-wrapper{
    background-color:{{ menuColorMobile }}; /* Menu background color set off global menuColorMobile variable */
    width: 100%; /* Full screen width */
  }

   /* Level 1 Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul > li{
    position: relative;
  }
  .custom-menu-primary .hs-menu-wrapper > ul > li a{
    font-size: 22px; /* Font size of top level list items */
    line-height: 45px;
    overflow: visible;
  }

  /* Level 1 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul li{
    border-top: 1px dotted rgba(255, 255, 255, .35); /* Adds transparent dark highlights to top of top level list items */
  }
  .custom-menu-primary .hs-menu-wrapper >  ul li a{
    padding: 0 10px;
    color:{{ aColorMobile }}; /* link color set by global mobile-aColor variable */
  }
  .custom-menu-primary .hs-menu-wrapper > ul li a:hover{
    color:{{ aColorHoverMobile }}; /* link hover color set by global mobile-aColorHover variable */
  }

  /* Level 2 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul ul li{
    background-color: rgba(255, 255, 255, .08);
  }
  .custom-menu-primary .hs-menu-wrapper > ul ul li a{
    text-indent: 10px; /* Indent Child lists */
    font-size: 16px; /* Font size of child lists */
  }

  /* Level 3 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul ul ul li a{
    text-indent: 30px; /* Indent Child lists */
  }
  .custom-menu-primary .hs-menu-wrapper > ul ul ul ul li a{
    text-indent: 50px; /* Indent Child lists */
  }
}

The menu is designed to be easily matched to the color scheme of your website by editing three variables:

menuColorMobile - Set Mobile Menu Background Color
aColorMobile - Set Link Color
aColorHoverMobile - Set Link Hover Color

Designers

Tutorials

How to implement a built-in toggle mobile navigation

Add custom class to Advanced Menu module

Add or replace mobile navigation Javascript

Reference the script in footer of template

Style the mobile menu

Designers

Tutorials

How to implement a built-in toggle mobile navigation

Add custom class to Advanced Menu module

Add or replace mobile navigation Javascript

Reference the script in footer of template

Style the mobile menu

Subscribe to designer doc updates