Hiding NavBar (orQuickLaunch) in Modern page.

[Michel LAPLANE]

Hi, I wanted to hide the QuickLaunch Bar when displaying my React WebPart.

I succeed in removing it with this code when in the DidMount or DidUpdate :

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

    if(navBar.length != 0)

    {

    navBar[0].remove();

    }

Is it a good practice ?

Regards

[#2]

I might be wrong, but the ‘gotcha’ may be that the class name changes, which would break your statement.

In my experience, any class with a set of characters suffixed tends to be dynamically assigned.

[#3]

This.

And to answer your question in short, it is not good practice.

[#4]

@Deleted Thanks for your reply, It is what I suspected. But how can I find the div spNav div for hiding the quicklaunch more safely?

[#5]

@Thomas Berman Thanks for your reply, It is what I suspected. But how can I find the div spNav div for hiding the quicklaunch more safely?

[#6 · Accepted solution]

@Michel LAPLANE 

You can hide the Quick Lauch (left side navigation) via site settings > navigation elements > uncheck "Enable quick launch"

As for the top bar, you can delete all the links in there, but hiding via CSS/JS is definitely not advisable.

[#7]

@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