If you’re a developer, you can customize Navo for SharePoint using your own JavaScript code. Due to the capabilities of modern JavaScript, you can also use JavaScript to inject custom CSS and change the way Navo for SharePoint looks.

Since Navo for SharePoint runs directly on a SharePoint page, you can also use your custom code to change SharePoint's behaviour and look. This is an incredibly powerful feature, and only recommended for advanced users.

How to add custom code to Navo

  1. Download mastheadScript.js here by right-clicking and selection “Save as…”.
  2. Add your custom code to the file. Once you’re done adding your custom code, upload “mastheadScript.js” to your root site’s Site Assets folder. By “root site”, we mean the the core site of your SharePoint environment. For example, “http://navo.sharepoint.com”. For Navo to detect the custom script, it must be named “mastheadScript.js”.
  3. The script will now load and run on any site that has Navo added to it. Deleting the script will remove it from all Navo sites.

Editing mastheadScript.js

Once upload, mastheadScript.js will run on every page load. The best way to edit and add your own code is to edit the file locally and then reupload it to your root site.
The best place to add your code is within the function “mastheadReady”. Navo guarantees that the code will only run once the page is loaded:


window["mastheadReady"] = function(mastheadJSON) {
    // Your code here will run when Navo loads
}


For example, if you wanted to hide the built in navigation that comes with Hub Sites, all you need to do is set the display property to none on the element. Putting this code within "mastheadReady" means that the querySelector call will never fail:


window["mastheadReady"] = function(mastheadJSON) {
    // Hide the Hub Site navigation
    document.querySelector(".ms-HubNav").style.display = "none";
}


Lifecycle Hooks
mastheadReady(navoJSON)
“mastheadReady” is called when Navo For SharePoint has rendered for the first time on that page. If you’re working on a modern site, “mastheadReady” should be used to setup any customizations you’re making. If you’re working on a classic site, you can safely assume that “mastheadReady” is called on every page load, while on modern sites you cannot.
mastheadPageNavigation(navoJSON)
This method is called whenever SharePoint does a partial page load. Partial page loads can only happen on Modern SharePoint, and usually happen when you’re navigating between pages on a hubsite. If your custom script relies upon site specific information (such as URLs or page titles), you’ll want to use “mastheadPageNavigation” to make sure the information us up to date.