Forum Discussion

MVP

Jun 16, 2019

Hiding NavBar (orQuickLaunch) in Modern page.

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

Thomas Berman
Jun 18, 2019
MichelLAPLANE

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.

Deleted
Jun 17, 2019
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.
- Thomas Berman
  Iron Contributor
  Jun 17, 2019
  This.
  
  And to answer your question in short, it is not good practice.
  - MichelLAPLANE
    MVP
    Jun 17, 2019
    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?
- MichelLAPLANE
  MVP
  Jun 17, 2019
  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?

Share

Resources