I run a few sites collection in SharePoint online (Office 365). For one site I would like to make little branding. Everything works perfect, except one thing. I would like to display to the users only app launcher, without entire ribbon (id="ms-designer-ribbon"). I know how to hide/show ribbon in my master page with this code

<div id="ms-designer-ribbon" style="display:none">

it works. Also I know other options like jquery.

But I don't know how to show ONLY app launcher. I found out that the ID of app launcher is: "O365_MainLink_NavMenu", but still I did not make any progress with displaying only it. Is it even possible?

It seems that the ribbon is always overwritten somehow by Microsoft. For example If I change background color of the "ms-designer-ribbon" with code

<div id="ms-designer-ribbon" style="background:lime">

to "lime". The upper part of the ribbon (id="suiteBarTop") will stay unchanged, still blue color. But I can see during the page loading that my color was in place for a moment, but finally it will be overwritten... But the bottom part of the ribbon (id="s4-ribbonrow") will have new lime background color. Do you have any idea how to change it?

  • 1
    did you try to hide functions in ribbon separately, not whole ribbon at one time :? and for color, try creating css document in style library and then call it from master page. – Danilo Aug 21 '15 at 12:40
  • Yes, I tried. And the color thing is just example that SharePoint online runs something after my code. – Tomasz Szulczewski Aug 21 '15 at 12:53
  • Also I tried Alternate CSS URL for my master page. And I can play with "s4-ribbonrow", but it doesn't work with "suiteBarTop" – Tomasz Szulczewski Aug 21 '15 at 13:06
  • didn't you say "suiteBarTop" will stay unchanged? So you want also this id to change, correct? – Danilo Aug 21 '15 at 13:29
  • Ahhhh. Thank you Danile. I found solution! I was able to move forward. It was necessary to overwrite in Alternate CSS URL much more classes than I thought. Right now I overwritten: #ms-designer-ribbon #suiteBarDelta #suiteMenuData #suiteBarTop #O365_NavHeader #O365_MainLink_NavMenu #O365_MainLink_Logo #O365_TopMenu #s4-ribbonrow I have to check if I really need them all. Thanks again! – Tomasz Szulczewski Aug 21 '15 at 13:46

Your Answer

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

Browse other questions tagged or ask your own question.