Cloning Template to HTML -- mobile menu missing

[dennisedson]

Hi all,

I have cloned a template to HTML to set up a hubdb interaction. 

All is good except that the mobile menu is missing. 

The menu is in a global module which is referenced in the new html file

{% include 'generated_global_groups/5935866465.html' %}

The menu items are there (hidden), but the mobile trigger is gone. 

are there items that are not copied to html when performing a clone? 

Any thoughts on this?

Thanks,

d

[tjoyce]

@dennisedson - can we get a preview link to the page? maybe it's there but hidden

[dennisedson]

@tjoyce-- here you go. 

http://www-averon-com.sandbox.hs-sites.com/about-us/wendell-brown

[tjoyce · Accepted solution]

@dennisedson - There's 2 things you need to do to fix this.

1. Add the following script to your page:

$(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;
    });

});

2. On your menu wrapper you have a class "cm-hidden-phone" (see screenshot) - you need to remove that class in order for the hamburger to appear.

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[dennisedson]

@tjoyce, why did these not come over from cloning to html? 

I will add now and see if it works.

as always, thanks for speedy reply!

[dennisedson]

@tjoyce, noticed that when i clone to html, the external js scripts are not included in that clone.  added my scripts and all is good!

thanks,

d