Search code examples
csssharepointsharepoint-2013master-pages

How to put SharePoint 2013 logo above menu?


Is there a way to move the logo from its default location (to the left of the menu) to above the menu? I can't find any resources on how to do this.

I've tried downloading the existing master page (seattle) and changing it (and checking it in, etc), with some tweaks, but there's no impact, so much so that I had to verify it was actually active.

One change included move this:

<div id="siteIcon" class="ms-tableCell ms-verticalAlignTop">
<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server">
    <SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server"   id="onetidProjectPropertyTitleGraphic" >
        <SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=23" runat="server"/>
    </SharePoint:SPSimpleSiteLink>
</SharePoint:AjaxDelta>
</div>

from line 354 to various places, such as above lines 216, 217, 218, or 219, or after 326 (above the ribbon sections). No change. I'm admittedly guessing.


Solution

  • The full answer is here, based on Maarten's. This includes hiding the left nav. I had to raise the #siteicon (a container) to 100px high to add some space between the logo and the menu beneath it.

    <style type="text/css">
    
    #sideNavBox { display: none; }
    #contentBox { margin-left: 20px; }
    #topNav {  margin-top: 50px; }
    
    #siteIcon { height: 100px; }
    
    .ms-siteicon-img {
    max-height: 200px;
    max-width: 500px; }
    
    #s4-bodyContainer #titleAreaBox.ms-table, #s4-bodyContainer #titleAreaBox > 
    #titleAreaRow {display:block;}
    
    #s4-bodyContainer #titleAreaBox > #titleAreaRow > #siteIcon 
    {float:left;display:block;margin:0 auto;}
    
    </style>