Nov 15 2017 11:31 AM - edited Nov 15 2017 11:33 AM
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 the top right hand corner of the screen and point it to a classical Search Results page where I have refiners etc ?
Thanks
Nigel
Jan 28 2018 01:21 PM
SolutionI 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
Jan 28 2018 03:22 PM
Thanks Nigel - it certainly does.
Apr 02 2018 07:17 AM
Thanks Nigel, that's what I am trying to do from the extension.
Did you notice a that left nav is still rendered for a split second before our application customizer actually loads?
Apr 02 2018 03:00 PM
Hey,
mine is actually running from a web part on the page (not a customizer) and yes it definitely shows the LHS nav for a flicker before the CSS is processed.
There may be a better way to get the CSS processed earlier in the page load, but I am not sure how/what is the best way to achieve that - sorry.
If you do find out, please post the solution on this thread as it would be good to know
Thanks
Nigel
Jul 13 2018 11:58 AM
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.
Aug 14 2018 06:44 AM
@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.
Oct 17 2018 02:03 PM
Yes, It can be done. Go to Site Settings -> Navigation Elements (under Look and Feel).
Uncheck "Enable Quick launch". This should remove the left navigation pane.
Nov 23 2018 09:41 AM
How are you doing this from a web part on a modern page?
Jan 18 2019 07:24 AM
Sometimes the simplest solutions are always the last to be suggested, thanks for that!
Jun 17 2019 08:39 AM
In modern pages you can do this without css - just in site settings, Navigation Elements -> uncheck Quick launch
Aug 20 2019 03:11 PM
@Angus Muir That doesn't seem to work, at least now in my modern site.
Oct 01 2019 06:43 AM
@Nigel_Price9911 I found that you can hide the div in a CSS stylesheet. Just replace the red text below with the id for your div and it should hide it. I've noticed that the div changes after a while which means I need to go update the id for that div but it works well otherwise.
Oct 25 2019 01:07 PM
@dancourcelles I was building personal pages for employees that don't require LHS navigation and was able to remove it from "Site Settings" -->"Navigation" --> "Structural Navigation: Editing and Sorting". Select "Current Navigation" and delete all items in the list. Click OK. As a note, this removed the navigation, but you can't use the column space that was vacated by the navigation. So even with a 4 column layout (3 columns plus the vertical column), the columns just float left and the (now empty and unusable) fifth column floats to the right hand side of the page.
Nov 06 2019 11:54 AM
When I remove left hand navigation my search box disappears. When I refresh screen it flickers for less then a second and boom--gone.
How do I get it back, I need search box.
Apr 02 2020 08:08 PM
The best way is to delete all left side navigation links then reload the page, quick launch disappears. It works.
Best Regards,
G Vijai Kumar
Nov 25 2020 01:05 PM
Jan 28 2018 01:21 PM
SolutionI 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