If you are able to branding Top Navigation, this will be a lot easier for you to continue. 

If you are not, You can read my article about Top Navigation to set us on same page.

http://www.itlei.com.au/index.php/microsoft/10-sharepoint/171-branding-sharepoint-2013-top-navigation

 

Ok, lets go to the points directly:

1. Insert this in your master page quick launch area, remember this is for the HTM master page, do not touch the .master master page. In my example, I created left panel for QuickLaunch, right panel for page layout.

    <div class="leftpanel">
                        <div data-name="QuickLaunch">
                            <!--CS: Start Vertical Navigation Snippet-->
                            <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                            <!--SPM:<%@Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                            <div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
                                <!--MS:<SharePoint:AjaxDelta runat="server" CssClass="ms-core-navigation" BlockElement="True" ID="DeltaPlaceHolderLeftNavBar">-->
                                    <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBar" runat="server">-->
                                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBarTop" runat="server">-->
                                        <!--ME:</asp:ContentPlaceHolder>-->
                                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderQuickLaunchTop" runat="server">-->
                                        <!--ME:</asp:ContentPlaceHolder>-->
                                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderLeftNavBarDataSource" runat="server">-->
                                        <!--ME:</asp:ContentPlaceHolder>-->
                                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderCalendarNavigator" runat="server">-->
                                        <!--ME:</asp:ContentPlaceHolder>-->
                                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderLeftActions" runat="server">-->
                                        <!--ME:</asp:ContentPlaceHolder>-->
                                        <!--MS:<SharePoint:SPNavigationManager ID="QuickLaunchNavigationManager" runat="server" QuickLaunchControlId="v4QuickLaunchMenu" ContainedControl="QuickLaunch" EnableViewState="false">-->
                                            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">-->
                                                <!--MS:<Template_Controls>-->
                                                    <!--MS:<PublishingNavigation:PortalSiteMapDataSource runat="server" ID="SiteMapDS" SiteMapProvider="CurrentNavigation" EnableViewState="false" StartFromCurrentNode="true" ShowStartingNode="false" TrimNonCurrentTypes="Heading">-->
                                                    <!--ME:</PublishingNavigation:PortalSiteMapDataSource>-->
                                                <!--ME:</Template_Controls>-->
                                            <!--ME:</SharePoint:DelegateControl>-->
                                            <!--MS:<SharePoint:AspMenu runat="server" DataSourceId="QuickLaunchSiteMap" AdjustForShowStartingNode="True" StaticDisplayLevels="3" SkipLinkText="" EnableViewState="False" MaximumDynamicDisplayLevels="0" UseSimpleRendering="True" Orientation="Vertical" ID="V4QuickLaunchMenu">-->
                                            <!--ME:</SharePoint:AspMenu>-->
                                        <!--ME:</SharePoint:SPNavigationManager>-->
                                        <!--MS:<SharePoint:SPNavigationManager ID="TreeViewNavigationManagerV4" runat="server" ContainedControl="TreeView" CssClass="ms-tv-box">-->
                                            <!--MS:<SharePoint:SPLinkButton runat="server" accesskey="&#60;%$Resources:wss,quiklnch_allcontent_AK%&#62;" CssClass="ms-tv-header" ID="idNavLinkSiteHierarchyV4" NavigateUrl="~site/{0}/viewlsts.aspx" Text="Site Content">-->
                                            <!--ME:</SharePoint:SPLinkButton>-->
                                            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">-->
                                                <!--MS:<Template_Controls>-->
                                                    <!--MS:<SharePoint:SPHierarchyDataSourceControl runat="server" ID="TreeViewDataSourceV4" RootContextObject="Web" IncludeDiscussionFolders="true">-->
                                                    <!--ME:</SharePoint:SPHierarchyDataSourceControl>-->
                                                    <!--MS:<SharePoint:SPRememberScroll runat="server" ID="TreeViewRememberScrollV4" onscroll="javascript:_spRecordScrollPositions(this);" style="overflow: auto;">-->
                                                        <!--MS:<SharePoint:SPTreeView ID="WebTreeViewV4" runat="server" ShowLines="false" DataSourceId="TreeViewDataSourceV4" ExpandDepth="0" SelectedNodeStyle-CssClass="ms-tv-selected" NodeStyle-CssClass="ms-tv-item" SkipLinkText="" NodeIndent="12" ExpandImageUrl="/{0}/images/tvclosed.png" ExpandImageUrlRtl="/{0}/images/tvclosedrtl.png" CollapseImageUrl="/{0}/images/tvopen.png" CollapseImageUrlRtl="/{0}/images/tvopenrtl.png" NoExpandImageUrl="/{0}/images/tvblank.gif">-->
                                                        <!--ME:</SharePoint:SPTreeView>-->
                                                    <!--ME:</SharePoint:SPRememberScroll>-->
                                                <!--ME:</Template_Controls>-->
                                            <!--ME:</SharePoint:DelegateControl>-->
                                        <!--ME:</SharePoint:SPNavigationManager>-->
                                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderQuickLaunchBottom" runat="server">-->
                                            <hr />
                                            <!--MS:<SharePoint:ClusteredSPLinkButton runat="server" accesskey="&#60;%$Resources:wss,quiklnch_allcontent_AK%&#62;" CssClass="ms-core-listMenu-item" Permissions="ViewFormPages" ID="idNavLinkViewAllV4" NavigateUrl="~site/{0}/viewlsts.aspx" Text="All Site Content">-->
                                            <!--ME:</SharePoint:ClusteredSPLinkButton>-->
                                        <!--ME:</asp:ContentPlaceHolder>-->
                                    <!--ME:</asp:ContentPlaceHolder>-->
                                <!--ME:</SharePoint:AjaxDelta>-->
                            </div>
                            <!--CE: End Vertical Navigation Snippet-->
                        </div>
                    </div>

 

2. The StaticDisplayLevels and MaximumDynamicLevels decide what to show.

3. The css part to brand it. Put this in your custom style sheet file to overwrite the system ones:

/*---Cusmoize vertical--------*/
.ms-core-navigation
{
/* [ReplaceFont(themeFont:"navigation")] */ font-family:Cambria;
}

.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenu-item,
.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-core-listMenuEdit,
.ms-core-listMenu-heading,
.ms-tv-header
{
color:#012a60;
font-size:1.05em;
vertical-align:middle;
/* [ReplaceFont(themeFont:"navigation")] */ font-family:Cambria;
display:block;
font-weight:bold;
word-wrap:break-word;
overflow:hidden;
padding-top:5px !important;
margin-bottom:10px !important;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ border-bottom:1px solid #dbddde

}

.ms-core-listMenu-verticalBox > .ms-core-listMenu-item,
.ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item
{
display: block;
	text-decoration: none;
	padding: 2px 3px 1px 3px;}
	
	
#sideNavBox
{

width:115px;
float:left;
margin-left:40px;
padding-top:10px;

}
.ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item
{

font-size:0.9em;
font-family:Cambria;
font-height:1.25em;
color:#333333;
padding:2px 3px 1px 3px;
}

hr
{
	border-top:0 !important;
}
.ms-rtestate-field p,
p.ms-rteElement-P
{
margin:0px 0px 10px 0px;
line-height:1.3;
}

 

4. Again, use Internet Explorer Developer Tool, DOM explorer to locate each element and overwrited the CSS in your custom CSS sheet. 

 

About Lei

I am an IT specialist with over 10 year experience - years on Automation, on-Premise or Azure.

I am happy to develop however never want be a full time developer. Only do what I have to do. If it has to be PowerShell,HTML, PHP, CSS, C#, VBS or JS, front end or backend, so be it, doesn't matter!

Spent years with Windows, SCCM, SharePoint, SQL and Exchange servers. For last several years, I have been actively working under On Premise > Azure environment.

THERE IS NO WAY BACK!!!

Current Certificates:
    Microsoft® Certified-
  • -Enterprise Administrator
  • -Database Administrator
  • -SharePoint Administrator
  • -Administering and Deploying SCCM 2012
Red Hat Certified Technician
ITIL V3 Foundation - Practitioner

Working on Azure Certificates now and hopefully they can stop upgrading their questions one day! GIVE ME A BREAK!

Contact Lei

Name *
Email *
Comments *

Traffic since 10/08/2016

Today47
Yesterday83
This week671
This month1967
Total416327

Visitor Info

  • IP: 54.227.51.103
  • Browser: Unknown
  • Browser Version:
  • Operating System: Unknown

Who Is Online

1
Online

2017-12-17

Login