Skip to main content

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. "

There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.

image
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>

Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin.

Once you are done, simply modify the web part and hide it on the page.

image

If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Comments

Dan said…
Awesome... thank you ...
Christian Stahl said…
Hi mate! I was struggeling with this for some month ago, and get to the same result as you, I wrote about that in my blog.

http://chrisstahl.wordpress.com/2010/03/15/hide-the-quick-launch-in-sharepoint-2010/
Mahmoud Hakeem said…
Nice article.
Do u know how to fix the height of the content div?
that the top and left navigation bars have a fixed position when the user scrolls the page down or up?

Thanks in advance for your help.
Anonymous said…
Good Post,
I am trying to reverse a bit by showing top global nav and left nav for a site/site collection created with Publishing Team Site Template. I need to show both, but if i create a web part page i am getting top nav ONLY, and if i create a Publishing page i am getting ONLY Left nav, I think it's because of master pages one uses v4.master other one uses nightandday master, anyway i can add something in nightandday master page to show top nav.

Appreciate your help - Ipacs
Anonymous said…
You are my saver for today!!
Thanks.
Anonymous said…
For me it didn't work, I was able to do it in different way

http://virtualizesharepoint.com/2011/03/31/removing-the-left-hand-navigation-in-sharepoint-2010/
Anonymous said…
This is about the tenth or so post i've found on the subject, but none specifies where the "master file" is; not even a file name! Could you please be more specific?
Anonymous said…
thank you for the post
Niranjan said…
thanks for the tip.
can u suggest how to hide quick launch on application pages? i tried adding your css class to my custom master page.i can hide quick launch on settings.aspx but not on user.aspx page
any help will be appreciated
Kim said…
This is so great! Thanks for posting - I tried to do this for 3 days before!
Balu said…
Thank you! It works like a charm!
Sa Sa said…
This comment has been removed by the author.
Sa Sa said…
This comment has been removed by the author.
Sa Sa said…
This comment has been removed by the author.
Sa Sa said…
Could i this trick use in Security Trim controls, actualy want to close this panel for users who hase the view permissions, could I?
Anurag said…
very good post thanks a lot...
Anonymous said…
Hi,
I have Tried Hiding Recently Modified section in the Left Navigation in “Site Pages” using below CSS in HTML Form Web Part
< style type="text/css">
.s4-recentchanges
{display: none;}
< /style>
It is hidden for Users, who have “Full Control” permission, but not for others. I have “Full Control” Permissions.
Please provide any solution for this issue.
Gloria Schrock said…
Worked perfectly. Thank you!
aterese said…
Erik, I've been trying to find a way to turn the left navigation into a dropdown menu in my responsive design (after the global navigation dropdown). Do you have any articles on this, as I can easily accomplish on the global nav, but no the quick launch.
Karl said…
Hi thanks a lot for the contribution i tried and works very find in Sharepoint 2010.

I was concerned with the wandering of the users in the left hand menu, but with this i applied not to a Home page else a List page and works like a charmy.Thanks again!
Russ said…
Works very well, thanks. Question, from a layman: how about the right panel???
THank you!!!!!!!!!!!!!!!!!!!!!!
Kim Diveley said…
I read the same on another site and have tried it numerous times. It works great until I save the page and then the left nav reappears. Any suggestions?
Erik Swenson said…
@ Kim, you might want to try using a script editor webpart instead of the Content Editor... Also make sure you Publish your page, and approve it if needed.
anastasia tan said…
http://camaragenbandarq.blogspot.com/2017/05/membahas-macam-macam-judi-di-indonesia.html
http://agenbandarqcamarqq.blogspot.com/2017/05/mengetahui-4-tempat-judi-termewah-di.html
http://agendomino99camarqq.blogspot.com/2017/06/trik-curang-main-bandarq.html
http://agendominocamar.blogspot.com/2017/06/mengetahui-warnet-di-jepang-yang.html
http://agendominocamarqq.blogspot.com/2017/06/cara-mendaftar-di-shioqq-situs-agen.html
http://www.jakartatercinta.com/2017/05/mengenal-situs-shioqq-agen-bandarq.html
http://www.jakartatercinta.com/2017/05/shioqqnet-agen-bandarq-yang-memberi.html
Karthika Shree said…
That was a great message in my carrier, and It's wonderful commands like mind relaxes with understand words of knowledge by information's.
Sharepoint Training in Chennai
user experience said…
The landscape of UX research is always changing. Thanks for sharing this new method!
Unknown said…
Sas Training Institute in Noida-Webtrackker is the best sas training institute in noida. If you are search training institute in noida than webtrackker is the best option for you. SAS has the advantages of a long history, common use of biostatists and a wide range of statistical procedures. Data transfer is very powerful for manipulating data, but it has some limitations.
PHP Training Institute in Noida
Sap Training Institute in Noida
Hadoop Training Institute in Noida
Oracle Training Institute in Noida
Linux Training Institute in Noida
Dot net Training Institute in Noida
Salesforce training institute in noida
Java training institute in noida
Unknown said…

Excellent Blog. I think very useful for all people. keep up the great posts! You can also get the services for Brand Desing in Brisbane
binalpatel said…
Hello,
Greate Blog, Our Web Development Company in Ahmedabad offers Business Website Development Company Service in india. Get PHP Development services, Web Application Development with HMMBiz.
Vistas AD Media said…
Good post...

We are all also providing Web Designing Company in Bangalore - Vistas is one of the top website design companies and our Web Designers deliver premium Web Design Services in Bangalore
ciit noida said…
CIITN Noida provides Best java training in noida based on current industry standards that helps attendees to secure placements in their dream jobs at MNCs.The curriculum of our Java training institute in Noida is designed in a way to make sure that our students are not just able to understand the important concepts of the programming language but are also able to apply the knowledge in a practical way.

Java is inescapable, stopping meters, open transportation passes, ATMs, charge cards and TVs wherever Java is utilized.
What's more, that is the reason Well-prepared, profoundly gifted Java experts are high sought after.

If you wanna best java training, java industrial training, java summer training, core java training in noida, then join CIITN Noida.
CIIT Noida said…
CIITN is the Best Php training institute in Noida and delhi Ncr. You will get Live Project Training on PHP by our PHP expert who have 5+ year industrial experience.Focus on practical and live project training. In our PHP training, we you will learn core PHP, advance PHP, HTML, CSS, JavaScript, jQuery, Bootstrap, Cake PHP and Wordpress.CIITN provides 100% job assistance in PHP training. CIITN is well known PHP coaching center because our 100% PHP students are placed now.


Ciitnoida provides Core and Advance Java Training in Noida. We have a team of experienced Java professionals who help our students learn Java with the help of Live Base Projects. The object-oriented, class-based build of Java has made it one of most popular programming languages and the demand of professionals with certification in Advance Java training is at an all-time high not just in India but foreign countries too.

By helping our students understand the fundamentals and Advance concepts of Java, we prepare them for a successful programming career. With over 13 years of sound experience, we have successfully trained hundreds of students in Noida and have been able to turn ourselves into an institute for best Java training in Noida.

php training in noida
java training institute in noida
javascript training in noida
linux training in noida
linux institute in noida
red hat linux training in noida
ciit noida said…
CIITN is the pioneer of education providing the best PHP training in Noida as per the current industry requirement that enables candidates to land on their dream jobs in companies worldwide. CIITN Provides best PHP training course in Noida. CIITN is a renowned training company providing the best training service and also being the best PHP training institute in Noida rendering practical knowledge through training on projects and a dedicated placement assistance for all. The course curriculum for PHP training course is designed to provide in-depth knowledge that covers all the modules for the training ranging from basic to advanced level. At CIITN PHP training in Noida is supervised and managed by industrial experts having more than 10 years of experience in handling PHP projects. CIITN training comprises of both classroom as well as practical sessions to deliver an ideal environment for students that will enable them to handle difficult and complex situation when they would step into the reality of IT sector.CIITN is an excellent PHP training center in Noida with superior integrated infrastructure and newly designed labs for students to practice and pursue training for multiple courses at Noida. CIITN institute in Noida train thousands of students around the globe every year for the PHP training at an affordable price which is customised as per each candidate’s requirement of modules and content.


PHP training in Noida
CIIT Noida said…
CIITN is the Best Php training institute in Noida and delhi Ncr. You will get Live Project Training on PHP by our PHP expert who have 5+ year industrial experience.Focus on practical and live project training. In our PHP training, we you will learn core PHP, advance PHP, HTML, CSS, JavaScript, jQuery, Bootstrap, Cake PHP and Wordpress.CIITN provides 100% job assistance in PHP training. CIITN is well known PHP coaching center because our 100% PHP students are placed now.


Ciitnoida provides Core and java training institute in noida. We have a team of experienced Java professionals who help our students learn Java with the help of Live Base Projects. The object-oriented, class-based build of Java has made it one of most popular programming languages and the demand of professionals with certification in Advance Java training is at an all-time high not just in India but foreign countries too.

By helping our students understand the fundamentals and Advance concepts of Java, we prepare them for a successful programming career. With over 13 years of sound experience, we have successfully trained hundreds of students in Noida and have been able to turn ourselves into an institute for best Java training in Noida.


java training institute in noida
php training in noida
linux training in noida
linux institute in noida
java course in noida
CIIT Noida said…
CIIT Noida provides Best MCA Courses in Noida based on the current

IT industry standards that help students to get high paying jobs in Top MNCs. CIIT provides Best MCA Training in Noida, Greater Noida, and Ghaziabad.

CIIT is one of the trusted MCA training institutes in Noida providing practical knowledge and 100% job assistance with basic as well as advanced

level MCA subjects. CIITN is the best MCA college in Noida, greater noida, ghaziabad, delhi, gurgaon regoin.

At CIIT MCA classes in Noida is conducted by subject experts corporate professionals with 9+ years of experience in managing real-time and live

projects. Sofracle Nano Specialized MCA classes Noida is the perfect blend of academic learning and practical sessions to provide maximum exposure to

students that transform an average student into a corporate professional whom companies prefer to hire.

Best MCA College in Noida
CIIT Noida said…
Wow amazing i saw the article with execution models you had posted. It was such informative. Really its a wonderful article. Thank you for sharing and please keep update like this type of article because i want to learn more relevant to this topic.

Best Linux training in Noida
Linux Training Institute in Noida
ciit noida said…
HADOOP TRAINING INSTITUTE IN NOIDA

CIITN provides Big data hadoop training in Noida in Noida as per the current industry standards. Our training programs will enable professionals to secure placements in MNCs. CIITN is one of the most recommended Hadoop Training Institute in Noida that offers hands on practical knowledge/practical implementation on live projects and will ensure the job with the help of advance level Hadoop Training Courses. At CIITN Hadoop Training in Noida is conducted by specialist working certified corporate professionals having 8+ years of experience in implementing real-time Hadoop projects.CIITN is the best Hadoop training center in Noida with a very high level infrastructure and laboratory facility. The most attractive thing is that candidates can opt multiple IT training course at Noida location. We feel proud by announce that CIITN prepares thousands of candidates for Hadoop training at sensible fees structure which is sufficient for best Hadoop training in Noida to attend the Hadoop classes.Hadoop training course includes “Knowledge by Experiments” strategy to get Hadoop training and performing real-time practices and real-time modulation. This extra ordinary practices with live environment experience in Hadoop Training certifies that you are ready to apply your Hadoop knowledge in big corporations after the Hadoop training in Noida completed.


Big data hadoop training in Noida

B-12, Sector - 2, Noida, U.P
State - Uttar Pradesh U.P
Country - India
Pin Code - 201301

Phone - +917290926565
Mon - Sun: 10am - 6pm

Dida ELhaik said…

تعد شركة تركيب اثاث ايكيا بالرياض هي الشركة الرائده والاولي في كافة الاثاث من تركيب وفك ونقل وتخزين وكافة الاعمال المتعلقة بالاثاث في الرياض وكافة المناطق والمحافظات بالمملكة العربية السعودية، وقد تصدرت شركة خبراء المملكة لتكون الأولى في مجال فك ونقل وتركيب الأثاث المنزلي وايضا فك وتركيب الستائر بالرياض وهي تتميز عن باقي شركات الرياض نظرا لما تقدمة من خدمات بشكل احترافي كما انها تتميز عن غيرها بكفاءة الفنيين والامتخصصين في مجال تركيب الاثاث فلا داعي لكثرة البحث فلديك خبراء المملكة فهم فعلا خبراء ومتميزون في جميع خدماتهم المقدمة
شركة تركيب اثاث ايكيا بالرياض
فني تركيب اثاث ايكيا بالرياض
شركة تركيب ستائر بالرياض
عامل تركيب ستائر بالرياض
شركة تركيب غرف نوم بالرياض
فني تركيب غرف نوم بالرياض
شركة تركيب باركية بالرياض
شركة تركيب عفش بالرياض
ما يميز شركة تركيب نقل وتركيب اثاث بالرياض
- تعد شركة تركيب اثاث ايكيا من الشركات المفضلة لكثير من العملاء فهم من منحوها الصدارة والتميز لتميز الخدمات المقدمة لهم وهي الاولي في تركيب الاثاث لزيادة خبراتها الكبيرة لسنوات.
تتميز ايضا شركة خبراء المملكة بكبر فرق العمل المتخصصة والمدربة بمهاره وتقنية عالية كما اننا ندعم صفوفنا بصفة مستمرة من العمال والموظفين والفنيين الأكفاء والمهرة كما انها Jستقبل العمالة الفليبنية

Popular posts from this blog

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…