This project is read-only.

Can I hide the sidebar?

Nov 9, 2013 at 2:28 AM
Is it possible for me to hide the sidebar on a page? We don't use the quick launch menu and on a lot of pages, the sidebar ends up looking like an empty grey box.

Image
Nov 12, 2013 at 1:29 AM
Hi,

There are a few different ways of accomplishing this.

In SP2013, there is a new icon, "Focus on Content" found in the upper right hand of the ribbon. This adds a class, ms-fullscreenmode, to the <body> tag that we then use to hide the left menu and expand the content area. SP 2010 does not include this, so if you are on 2010 we need to keep looking.

Another technique that we use is to add a similar class as ms-fullscreenmode to the <html> tag. This will work in both 2013 and 2010 although the sample code I will provide is for 2013. For 2010 you will just need to change a few id's around.

Basically our 2013 package already includes the styles:
/*Fullscreen*/
.ms-fullscreenmode #mainbody, .b3-fullscreenmode #mainbody {
    margin-left: 0px;
    width: 100%;
}
.ms-fullscreenmode #sideNavBox, .b3-fullscreenmode #sideNavBox {
    display: none;
}
using a little js magic you can add the class, .b3-fullscreenmode to the <html> tag as follows:
<script>
document.documentElement.className = document.documentElement.className + ' b3-fullscreenmode';
</script>
If you add this to the additionalpagehead content place holder in a page layout then only content pages that use that particular page layout will hide the left nav.

You could of course remove the left nav from the Master Page, but be careful as some of the content placeholders found within the left nav are expected by SP.

Let us know if you run into problems with any of the above ideas.

Eric
Jan 9, 2015 at 5:22 AM
Hello Eric,

I am trying to hide Quicklaunch using your code in one of the pagelayout - orbit.html.
However, it is not reflecting. also, I have checked the source code of the page, the script is not showing there, though I added in orbit.html using SPD.
Please guide

Thanks
Mar 6, 2015 at 7:06 PM
Where do I insert this code to hide the left nav box/bar all the time, regardless of what device is viewing the site (for all pages)? Also I cannot find these styles in the bootstrap3-custom.min.css. Where are they located? Thanks so much for any help you can provide.
Mar 9, 2015 at 3:36 PM
Edited Mar 9, 2015 at 3:38 PM
Eric,

I had the same result as aquarius. I used the suggested script but nothing happened.

I was able to achieve what i think is a potential solution...although i'm not sure yet if it will have any other side effects and ultimately I would rather use a "full screen view" per aspx page.

I edited the master page and replaced <div class="col-sm-3 col-lg-3 ms-dialogHidden"> with <div>

further down i replaced <div class="col-sm-9 col-lg-9"> with <div class="col-sm-12 col-lg-12">

I then added a script editor webpart with this code

(<style>.ms-core-navigation { DISPLAY: none }#contentBox { margin-left: 0px }</style>)

I'm hoping there is a better way to handle this functionality...as i will need to use multiple master pages on the site if i need the quick launch elsewhere.
Mar 9, 2015 at 11:04 PM
Hi All,

If you would like to hide the left nav bar at all time, place the CSS styles I provided in your custom stylesheet, or one of the css stylesheets provided in this project. As for the <script> block, I suggest adding that directly to your Master Page in the <head> section.

If on the other hand you want to only hide the left nav when specific page layouts are used, still add the css to an existing stylesheet, but add the script tag in your page layout, I recommend in the "PlaceHolderAdditionalPageHead" Content block, i.e.
<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderAdditionalPageHead">
<script>
document.documentElement.className = document.documentElement.className + ' b3-fullscreenmode';
</script>
</asp:Content>    
Eric
Mar 10, 2015 at 3:36 AM
Thanks for the help! I'm terribly sorry but I must be doing something wrong.

I added the styles to all three CSS files:
bootstrap3.min.css
bootstrap3-custom.css
bootstrap3-custom.min.css
(all at bottom of the stylesheet after everything else)

And I added the script to the bootstrap-3-server.master file in the head section just before the end...(below is the line you suggested we add along with the lines above and below for reference.
 <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script> document.documentElement.className = document.documentElement.className + ' b3-fullscreenmode';</script>

    <![endif]-->
    </head>
Please tell me what I'm doing wrong. Thank you so much!
Mar 10, 2015 at 2:52 PM
Edited Mar 10, 2015 at 2:59 PM
I did the same thing. I posted the css at the bottom of the called style sheets.

I posted the script in the aspx page layout I am calling and I tried it in the masterpage I am referencing and neither seem to remove the Quick Launch.

I'm wondering if how the bootstrap.master is constructed is keeping the page from going full screen. For instance, clicking the "focus on content" button does nothing where as if i'm using the foundation4.master, clicking that does hide the sidebar.

I do appreciate the quick responses.
Mar 10, 2015 at 3:41 PM
I noticed the same issue with the focus on content button doing nothing. Didn't think much about it, but I experienced it as well. I'm just too much of a novice when it comes to this to know what is causing what issues haha.
Mar 12, 2015 at 3:28 PM
Are there any other solutions to hiding the leftnav in the bootstrap 3 version?
Mar 17, 2015 at 1:05 AM
You could always remove it from the Master Page, or do you need to be able to dynamically hide and show the left nav on a per user basis?

Eric
Mar 17, 2015 at 2:00 PM
eoverfield wrote:
You could always remove it from the Master Page, or do you need to be able to dynamically hide and show the left nav on a per user basis?

Eric
I thought you said removing the left nav from the Master Page could cause problems because SharePoint expects it. I'd like to remove it or hide it all the time, but I do not want to cause errors or stability issues with my sites.
Mar 17, 2015 at 6:11 PM
Hi,

I know this is a cop-out answer, but "it depends". If you remove the current navigation control from your system master page, then it may be difficult to use many list view pages as well as site setting pages. If you know you will not want current navigation for content pages though, then you could easily remove that control from your custom/site master page. That is what I normally do for custom branding projects.

Eric
Mar 18, 2015 at 2:06 PM
For the most part I don't think I would need to use the left nav for any of my pages except maybe the calendar. So I'm not sure that I would need it very often, but possibly. I'm open to removing it all together, however I would still like try removing it from most page layouts and not completely removing it from the master. The code you suggested above to add to page layouts. I'm not sure where exactly to put that in the page layout files. I've opened bs3-orbit.aspx and have added the script as you can see below...
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
    <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server">
    <SharePointWebControls:FieldValue FieldName="Title" runat="server"/>
</asp:Content>

<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderAdditionalPageHead">
<script>
document.documentElement.className = document.documentElement.className + ' b3-fullscreenmode';
</script>
</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
I've included the styles you mentioned in the bootstrap3-custom.min.css file at the very bottom and nothing seems to have changed when I look at pages using the bs3-orbit.aspx layout. Please advise on what I might be doing wrong. Thanks!
Mar 22, 2015 at 1:34 PM
Hi Eric,

I need metadata navigation for a list or library. By default this populate on the side bar. However I do not use the side bar for any other purposes. How should I get the side bar only on lists and libraries?

Thanks in advance.

Chat.
Apr 14, 2015 at 7:50 PM
Hi Chat,

This sounds like a general navigation setting question. You should be able to update your navigation settings in the site settings admin area of your site. Be aware that you can only point to one term set for a given site, so if you want to use a different term set for top nav and left nav you will be out of luck without a custom nav provider.

Eric