I've below css code to hide suite bar. Could you please help me to how to apply this code for my site. I tried two options but in both cases the result is not showing.

  1. Copied below code in notepad and saved with name in double column "suitebar.css" and save in site asset library (not sure how to refer)

  2. Then second option edit the home page and under Insert option --> Embed Code. Paste this below code but I think this is also not right procedure.

Please advise.

/* Hide the left Suite Bar and right ribbon areas */
#suiteBarLeft {
    display: none;
#RibbonContainer-TabRowRight {
    display: none !important; /* !important needed to override SharePoint inline style */

/* Float the Suite Bar to remove from document flow and allow ribbon to move up */
#suiteBar {
    float: right;
    width: auto;

/* Alter stacking order and set positioning for ribbon */
#s4-ribbonrow {
    z-index: -1;  /* Allows Suite Bar to show on top of Ribbon */
    position: static;  /* Secret sauce - needed to maintain ribbon functionality */
  • Do you want to use this code only on one page, or on the entire site?
    – Erin L
    Dec 23, 2015 at 14:22

1 Answer 1

  1. Open the site in SharePoint designer
  2. Edit the current master page and add following before </head>

    <SharePoint:CssRegistration ID="CssRegistration1" name="<% $SPUrl:~SiteCollection/SiteAssets/suitebar.css %>"
  3. Save and publish the master page

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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