cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
ahosmer
Community Member

Theme Editor Desktop JS file not applied to mobile device web browsers

We have added customized JS to create another button in the global navigation. It works correctly in a desktop web browser, but not in a mobile device web browser. The Theme Editor supports mobile JS files, but it is only applied to the Canvas iOS or Android App. How do we support mobile devices not using the Canvas iOS or Android App. Should the desktop JS file apply here or is this area not supported? You'll see the two different global navigation layouts below. The one on the left has a Student Support Button at the bottom, while the mobile browser Global Navigation doesn't.

desktop global navigation has Student Support Button at Bottomdesktop global navigation has Student Support Button at BottomMobile Device Browser has no Student Support ButtonMobile Device Browser has no Student Support Button

0 Kudos
1 Reply
robotcars
Community Champion

@ahosmer

The responsive navigation for mobile and smaller screen formats is a different part of the DOM and requires a separate method to update. You can see the responsive nav via the desktop, if you resize your browser window or open the Dev Tools and collapse the viewport. The menu doesn't exist until the Hamburger is clicked and modifying it requires a JavaScript Mutation Observer, where as the Global Navigation menu is available when the page loads and can be directly modified.

There's one example here, and I've been working on a combined icon/tray for both available to replace the options here.