2

I want to hide these two elements.This works when I add display:none in developer tool but doesn't work when I add in my css file.

#s4-ribbonrow 
{
display:none;
}

Same with SuiteBarTop.The idea is to hide them on the home page to save the space.

  • Try changing it to #s4-ribbonrow { display:none !important; } instead. There could be a CSS rule with higher precedence than your CSS. Alternatively you could add JS to the page to inject the CSS rule directly onto the element. – KGlasier Jan 9 at 22:02
2

The following style for your reference.

<style>
#s4-ribbonrow{
    display:none !important;
}
#suiteBarTop{
    display:none !important;
}
</style>

You can also open .master page using SharePoint designer 2013 and find the "s4-ribbonrow" and "suiteBarTop" div, then add "style='display:none'" to the div attribute.

If you use modern UI, we can add the style into react script editor web part to achieve it.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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