How to Update Navigation Menu in HubSpot Content Staging

Get a Free HubSpot CMS Guide
How to Update Navigation Menu in HubSpot Content Staging

When using content staging in HubSpot you can easily test and preview design changes but the menu does not update to use the new staging domain. So you have to preview each page individually. This can be an issue when you are working on a HubSpot website rebrand and the client needs to click through the site.

The code below checks if you are visiting a sandbox environment. If you are, it then changes the menu links to match the sandbox domain. Be sure to update the domain in the code with your domain.

// Is this a hubspot sandbox?
if (window.location.href.indexOf("sandbox.hs-sites") > -1) {

    // Disable click events since we are changing the links
    $('#hs_menu_wrapper_menu a').css('pointer-events', 'none');

    // Wait for the menu to load and hubspot to add click tracking to links
    $(window).load(function() {

        // Select all menu anchor links
        $('#hs_menu_wrapper_menu a').each(function(){ 
            $(this).css('pointer-events', 'auto');
            var domain = document.domain;
            var oldUrl = $(this).attr("href"); // Get current url
            // Change your domain
            var newUrl = oldUrl.replace("https://www.YOURDOMAIN.com", "http://"+domain); // Create new url
            $(this).attr("href", newUrl); // Set herf value
        });
        
        // add a badge to make it clear you're visiting a staging environment
        $(document.body).append('<div style="background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;position:fixed;top:0;left:0;font-size:10px;">STAGING</div>');
    });
}

 


Related posts

Tags: , ,

Want to Get Email Updates of New Posts? Join My Email Newsletter