Hiding NavBar (orQuickLaunch) in Modern page.

MichelLAPLANE
MVP
Jul 03, 2019
Thomas Berman

As I found no other solution and as I do not want to add jQuery with a selector like ("*[class~='spNav_']") in my React component (that will be even more ugly) I have finally write this for hiding all not needed part of the page even it is not a good practice. If someone found a better solution please ping me.

private _displayDecoration = async (hideNavBar: boolean, hideCommandBar: boolean, hideSiteHeader: boolean, hidePageTitle: boolean, hideComment: boolean) => {

    try {

      if (hideNavBar == true) {

        let navBar = document.getElementsByClassName("spNav_b2bc1a6b");

        console.log("navBar = " + navBar.length);

        if (navBar.length != 0) {

          navBar[0].remove();

        }

      }

      if (hideCommandBar == true) {

        let commandBar = document.getElementsByClassName("commandBarWrapper");

        console.log("commandBar = " + commandBar.length);

        if (commandBar.length != 0) {

          commandBar[0].remove();

        }

      }

            if (hideSiteHeader == true) {

        let siteHeader = document.getElementsByClassName("mainRow-43");

        if (siteHeader.length != 0) {

          siteHeader[0].remove();

        }

      }

      if (hidePageTitle == true) {

        let pageTitle = document.getElementsByClassName("pageTitle_fb49508b");

        if (pageTitle.length != 0) {

          pageTitle[0].remove();

        }

      }

      if (hideComment == true) {

        let commentWrapper = document.getElementsByClassName("commentsWrapper_274128af");

        if (commentWrapper.length != 0) {

          commentWrapper[0].remove();

        }

      }

    }

    catch (error) {

      this.logError(error);

    }

}

Regards

Forum Discussion

Hiding NavBar (orQuickLaunch) in Modern page.

Resources