Tutorials

Table of contents
Close

Installing Selectnav Responsive Navigation

SelectNav is a responsive drop-down navigation for mobile devices and small screens that utilizes the native navigation of the device it is being viewed upon.  It is based off of TinyNav but allows several options not available for TinyNav.

SelectNav mobile navigation on iPhone with HubspotSelectNav Mobile Navigation on Android with HubspotSelectNav Mobile Navigation on Desktop with Hubspot

It is a JavaScript plugin that when used with media queries converts your website navigation into a smaller, responsive navigation for small screens.  

At this time it is not possible to be used with the HubSpot Sitemap generated navigation. You will have to add a list based version of your navigation.  

Step 1

Save the selectnav.min.js file to your file manager.

Step 2

add the JavaScript to the Site Footer HTML section in Content Settings, replacing 'selectnav.min.js' with the URL of the file you added to file manager.  The URL can be found in the information box on the right side of your screen when selecting the file in File Manager.  

<script src="selectnav.min.js"></script> <script>selectnav('nav'); </script>

Step 3

Add an HTML module above (or below depending on the styling of your site) your navigation module.

In the HTML module add an unordered list containing the pages you want to displayed in the SelectNav module.

For example:

 <ul id="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/how-it-works">How It Works</a></li>
      <li><a href="/faq">FAQ</a>
      <li><a href="/about">About</a></li>
      <li><a href="/get-started">Get Started</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>

Step 4

Add the SelectNav CSS code to your CSS file in the template builder.  This code will control when the SelectNav module is displayed,  prevent your unordered list from being displayed on the site page, and hide the full navigation when the mobile navigation is displayed.  

/**Select  Nav Responsive**/
/ default style /
.selectnav { display: none;}

 

/ small screen / @media screen and (max-width: 600px) {    #nav { display: none; }   .js .selectnav { display: block;}   .hs-menu-wrapper {display:none;} } 

Step 5

Once you have your SelectNav functioning it is time to customize it to your site!

You can use standard CSS to position the module on your page.

You can also use additional options to control additional features.

activeclass: allows you to declare the name of the active class
autoselect: allows selectnav to determine the active element automatically
nested:allows selectnav to handle multi-level menus
indent:works with the nested attribute to declare a character for the indent symbol
label:allows you to declare the label for the first element in the list.

Example:

 <script>selectnav('nav', {
    activeclass:'active',
    autoselect: true,
    nested: false,
    indent:'>'
    label: 'Menu',
});
 </script>