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>’);
});
}
The post How to Update Navigation Menu in HubSpot Content Staging appeared first on Bootstrap Creative.
