Forum Discussion

Nigel_Price9911's avatar
Nigel_Price9911
Iron Contributor
Nov 15, 2017
Solved

IS it Possible to remove the left hand nav from a modern team site

Hi   Is it possible to remove the left hand navigation bar from a modern team site so that If I use a Hero Web Part it can take up the whole of the screen ?   Then can I put the old search box in...
Extensibility
PnP
  • Nigel Witherdin's avatar
    Nigel Witherdin
    Jan 28, 2018

    I think the supported way to do this would be to write an extension (so it is applied to all pages in the site) that implements CSS to make the changes you are after.

     

    The CSS to hide the left hand nav on a modern page is:

     
    nav[role='navigation'] {
    display: none !important;
}
div[class^='searchBox_'] {
    display: none !important;
}
div[class^='pageContainer_'] {
    left: 0 !important;
}

     

    The same extension that injects this CSS could also display a search box (if you want it on every page), that redirects users to your search results page and injects the query into the 'k' querystring parameter

     

    hope it helps,

     

    Nigel

     
Chad Renstrom's avatar
Chad Renstrom
Copper Contributor
Jul 13, 2018

I found the answer without using any stylesheets.  Under Site Settings -> change the look, then select the current look, ten on the next page change the Site Layout to Oslo.

 

  • Dean_Gross's avatar
    Dean_Gross
    Silver Contributor
    Aug 14, 2018

    Chad Renstromwhat kind of site are you doing that on? when i try it on a modern group enabled team site, it does not work on the home page.

Resources