Hiding the Navigation Bar in a MicroStrategy Web Document

Icon - LocationHOME
MicroStrategy Web Document Navigation Bar
Icon - Astronaut
Adonis Salazar
Icon - Calendar
August 20, 2023
Icon - Categories

The solution below provides a step by step guide on how to hide the navigation bar in a MicroStrategy Web Document using CSS inside an HTML Container - this solution does not require using the MicroStrategy Web SDK. It is guaranteed to work in MicroStrategy 10.X and it can be useful on embed analytics projects, where MicroStrategy Report Services Documents are displayed in Microsoft SharePoint intranet portals or extranet portals.

hide navigation bar in microstrategy report services document

remove navigation bar with breadcrumbs microstrategy web document

remove microstrategy web navigation bar

microstrategy visual insight dashboard hide toolbar

microstrategy html container example

css to remove microstrategy document navigation bar

Why would you want to hide the navigation bar in a MicroStrategy Web Document? To display the Document in full screen, hide the MicroStrategy logo/branding, and to prevent users from navigating out of the Document and browsing through the MicroStrategy Project directory.

To hide the MicroStrategy Web navigation bar, follow the step-by-step instructions below or scroll down to the bottom of the page to watch a how-to video:

1. Once the Document development is completed, add an HTML Container to your Document, right click on the HTML Container, go to Properties and Formatting > General > HTML Container and select HTML Text, hit OK.

2. Then copy and paste the CSS code below into the HTML Container:

<style> .mstrmojo-OIVMPage-pathbar {display: none !important;} </style>

3. To prevent the HTML Container from displaying on your Document, right click on it, go to Order and select the Send to Back option.

4. Save the Document. The next time the document is opened, the top navigation bar will not be displayed.

If you would like to hide specific objects from the navigation bar, for example the home icon or the back and forward arrows, use the Google Chrome Developer Tools to identify its DOM element name. Once the DOM element name is identified for the object(s) you wish to hide, add the {display: none !important;} CSS property to it and place it inside a style HTML tag as shown in step 2, then add the CSS code to the Report Services Document in an HTML container.

How to Hide the Navigation Bar in a MicroStrategy Web Document Using CSS Video

Helpful Links: KB263886, KB46305, KB31799, KB258459, W3Schools CSS

Icon - Scroll to Top