SOLVED

Hiding NavBar (orQuickLaunch) in Modern page.

MVP

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

 

6 Replies
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.
This.

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

@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?

@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?

best response confirmed by Beau Cameron (MVP)
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.

@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