i am trying to figure out some CSS to widen the left hand navigation on a modern page within SharePoint online. I have been using the alternative CSS settings on the masterpage setting to enter the CSS. So I can trial it.. I have no access to F12 tools to find out what the element is called.

Has anyone done this and have some quick code , i can dig into.

2 Answers 2


For a SharePoint modern page, to add CSS/JavaScript code, you need to install Modern Script Editor web part then add your code into the web part.

  • yes i can appreciate that but I have no access to add SPFX web parts in modern... there has to be a way of doing it without adding in script editors. but the CSS has to be correct first before i do anything like that even if i could - so thats why i am testing with alternate CSS... Jul 5, 2019 at 9:51
  • Sadly, there doesn't actually have to be a way to do it without adding some kind of SPFX customization, in fact there isn't a way. alternate CSS does nothing on modern pages. The easiest solution is the SPFX web part Kally_MSFT mentioned. If you cannot do that, then you cannot apply custom CSS or JavaScript to modern pages.
    – Joe McShea
    Jul 5, 2019 at 13:57

I've hidden the left hand navigation using the following code:

<style type="text/css"> 
     #sideNavBox {DISPLAY: none} 
     #contentBox {MARGIN-LEFT: 5px}  

So the element is called #sideNavBox

  • that did not work when i added this piece of code in the alternative css on the masterpage setting.. SharePoint online.... any other ideas ? Jul 4, 2019 at 14:36

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.