How to change Headway’s responsive navigation default label

Change Headway Themes default navigation label

Headway Themes responsive navigation offers a great way to give your site visitor with an alternative navigation while browsing on smaller devices such as phones and tablets. It allows the visitor to use a normal navigation while on big screen and then converts itself (well it does not really converts itself) to a drop down navigation giving more room for your content rather than giving all the space for the navigation.

headway-default-navigation-text

The current default text is “– Navigation –“, which is perfectly fine, but what if you wanted to change it to something like “Navigate Here”, or “Start Here” or simply “Navigation” without the dashes on front and back of the text. So if you are looking to change it, here are the steps.

Steps on changing the Headway Themes default navigation label

  1. Turn off the responsive navigation on visual editor / grid mode and take note of the block number.
    nav-responsive-headway
  2. Copy and edit the code snippet below with the block number of your navigation block and your preferred Navigation label.
    <script type="text/javascript">
        jQuery(document).ready(function(){
    
        if ( typeof window.selectnav != "function" )
        return false;
    
        selectnav(jQuery("#block-2").find("ul.menu")[0], {
           label: "My Navigation Label",
           nested: true,
           indent: "-",
           activeclass: "current-menu-item"
        });
    
       jQuery("#block-2").find("ul.menu").addClass("selectnav-active");
    
     });
    </script>
    
  3. Go to your Headway – Options – Scripts Analytics tab and paste your code in the header scripts area.
    headway-options

There you have it, if everything works well you should see the new navigation label in action. If you got any questions, let me know and I will do my best to help you out.

Leave a reply

Book your free consultation
Share This