I recently had a request to add some navigation links to the tops of pages in personal sites on SharePoint Online. While the links they requested are largely available OOTB through the app launcher in the upper-left corner of the screen, they were looking for a solution that would…
- Be easily accessible
- Be instantly visible
- And most importantly, would require no training on their part.
Since we really didn’t want to change the site master page, we opted instead to add the necessary links to the top bar on the applicable pages with a little bit of JQuery.
If you want this feature for all pages in MySites, you’ll need to add the script by clicking here or a reference to it to mysite15.master. For the purposes of this post though, we’ll implement it on the “About me” page through a script editor web part and our script.
Tools you’ll need:
- The script attached to this post.
The script is just a small bit of JQuery that finds the div containing the section of the top bar we want to edit and then inserts some custom HTML into it.
There is one “gotcha” with this method though. Because of the way the top bar renders, you need to add a delay before inserting your HTML. In my case, I had to add 1 second. You may find your delay needing to be longer or shorter based on your environment.
- Go to the settings menu > Edit page.
- Scroll down until you see “Add a Web Part.” It doesn’t matter which zone you use.
- Click “Add a Web Part” and insert a script editor web part.
- Edit the web part.
- Click on the “edit snippet” link and paste the script provided into it.
- Stop editing the page, and you should now see something similar to the image at the top of this post.
If you have any other Microsoft SharePoint questions, please contact our SharePoint professional at NetWork Center, Inc.