I'm pretty new to everything SharePoint, but I'm tasked at the moment to 'brand' a company's intranet (I've got a fair knowledge of HTML and CSS). One of the things I want to do (actually,what the client wants) is to get rid of the suite bar at the top of the page, but I want to keep the right part of it (login, site settings etc.). That right part must become a part of the master page. What snippets or other code do I have to use to get this all done.


In 2013 ribbon has two section: s4-ribbonrow and suiteBar

#s4-ribbonrow, #suiteBar { display : none; }

The above CSS can hide both sections. And you should place this in the master page to make it work.

If you do the above then even the System Account or Administrator will not be able to see this. That situation can be avoided by doing adding below

<!—MS:<SharePoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl2″ runat="server" PermissionsString="AddAndCustomizePages">—>
    <script type="text/javascript">
        document.getElementById("s4-ribbonrow").style.display = "block";
        document.getElementById("suiteBar").style.display = "block";

If you want to hide individual Ribbon items then follow this blog. It explains how to find the element class/id using browser tools and then explain how you can hide it using CSS.

  • Amal, after reading your answer I realised my question was not clear enough. I want to hide the SuiteBar, but like to keep the Login, Site settings and Help functionality of it (the right part of the Suite Bar) and put it in the master page. Hiding parts by using display:none; is indeed a way to go. I already found something like 'SuiteBarLeft' and 'SuiteBarRight'. But even if I hide one of these, they still keep the same position on the page, meaning that they always stay on top of everything. And I want parts of it (the right part) to embed in the master page. – Woohoo Nov 6 '14 at 13:31
  • To start with you should hide the complete suit bar using display:none. Then using jQuery pick the elements you want and move it to the new div element append(suitebarelemets) – Amal Hashim Nov 6 '14 at 13:48
  • Also I don't think there is any OOB snippet which gives you the SuiteBar. – Amal Hashim Nov 6 '14 at 13:50
  • Amal, thanks for your quick respons. But, if it is not too much to ask, could you provide me with such a jQuery script that moves the wanted elements to a new div. My javascript skills are very limited, that's why. – Woohoo Nov 6 '14 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.