This guide will walk you through re-enabling mobile menu functionality within the WCMS Preview after your site has completed the landmark updates.Do not attempt this update if your site has not completed the landmark updates.
Step 1
Open the wcms.js file within _assets > local.
Step 2
Locate the following code within the wcms.js file.
$(document).ready(function() {
/** Initialize mobile nav module **/
var element = $('#offCanvas');
console.log(element.attr('data-url'));
$.get(element.attr('data-url'),
function(data) {
$('#offCanvas').html($(data).filter('#offCanvas').html());
IU.initialize("mobile-nav");
});
});Step 3
Replace the line IU.initialize("mobile-nav"); with these three lines:
$('.off-canvas').foundation();
IU.uiModules['mobile-nav'].init();
$('.off-canvas-overlay + .off-canvas-overlay').remove();Step 4
Check the new code to make sure it now matches this:
$(document).ready(function() {
/** Initialize mobile nav module **/
var element = $('#offCanvas');
console.log(element.attr('data-url'));
$.get(element.attr('data-url'),
function(data) {
$('#offCanvas').html($(data).filter('#offCanvas').html());
$('.off-canvas').foundation();
IU.uiModules['mobile-nav'].init();
$('.off-canvas-overlay + .off-canvas-overlay').remove();
});
});Submit to save changes.
Step 5
To confirm that the mobile menu navigation is working, navigate to the root index page within your WCMS site. This page is located at the bottom of the Site Content pane, just above the Settings block.
Once the page is open in the Preview window, resize your browser window smaller until the Menu toggle button appears in the top right of the window, then click the Menu toggle button.
If the update is successful, the mobile menu drawer should open and the mobile navigation is functioning correctly within the WCMS.