How to implement a built-in toggle mobile navigation

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 Navigation area, 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 desktop navigation may carry over.

We recommend building sites based on the HubSpot boilerplate, which includes a menu module.

This documentation expects that the user is using drag and drop templates, which are not recommended for new projects. Instead we encourage the use of themes, and drag and drop areas because they provide a superior developer and content creator experience.

Add custom class to Menu module

  • Navigate to the Menu module of the Template where you would like to implement the mobile navigation.
  • Click on the menu item and choose the Edit Tab in the right side editor pane. 
  • In the Styling Options section under the CSS Class option, add the class "custom-menu-primary".
  • Click Publish Changes on the template.

 

Adding a CSS class to the menu

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" dropdown at the top left of the page
  • Choose JavaScript
  • Name the file "CompanyMain.js" (do not use the name of your company instead of the generic CompanyMain.js)
  • Click Create

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 dropdown and choose Copy public URL. Alternatively, you can also right-click on the file name in the finder and choose Copy public URL.

Copy the files 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 the Design Manager finder.
  • In the Edit Tab of the inspector at the bottom of the Head and Body options, locate the Additional markup before </body> section.
  • Paste in your public URL into this area, wrap this with the require_js function, then click Publish Changes.
add-public-url-to-footer 

    {{ require_js(get_public_template_url('/siteroot/CompanyMain.js')) }}

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