Customizing the Top SuiteBar in SP 2013


  • Hello

    I have an branding-issue that I do not know how to approach.

    My standard SuiteBar needs to be modified from this,

    What it looks as standard

    to this,

    What I want it to look like

    How difficult is this, and is it plain CSS, or are there any other modifications needed ? My front-end side is not that strong.

    Wednesday, September 03, 2014 6:39 AM


  • Hi,

    With pure CSS, we can modify the style of page elements rendered in a browser.

    However, for ribbon which has script behind, there would be dynamic effects when being clicked, which would influence the look of other parts of the page.

    For example, I modify the suite bar and ribbon to make it look as below:

    When click the “Page” tab, it becomes:

    We can see that the ribbon now combines with the suite bar, however, the whole page looks not so comfortable, you will still need to keep on adjusting the style to make it look harmony with other parts of the page.

    This is the CSS and JavaScript applied to the page:

    <style type="text/css">
    	float: right !important;
    	display:none !important;
    	display:none !important;
    	width: 1986px !important;
    	height:0px !important;
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
    function ready()
    	$( "<span id='span1'>Wendyyyyyy</span>" ).insertBefore( "#s4-ribbonrow" );	

    Feel free to reply if there are still any questions.


    Patrick Liang

    Forum Support

    Please remember to mark the replies as answers if they
    help and unmark them if they provide no help. If you have feedback for TechNet
    Subscriber Support, contact

    Patrick Liang
    TechNet Community Support

    Thursday, September 04, 2014 10:04 AM