Branding Common Elements in SharePoint 2013
Part 3: Left Navigation
By Ryan Keller
Part 1   |   Part 2

 


Scenario
This is the third part of a series on branding common elements in SharePoint 2013. First we discussed branding the top navigation, then looked at branding the search box. Now we’re going to circle back to navigation, only this time we’ll be going over how to brand the left navigation. (If you’ve spent any amount of time in SharePoint, you’ve probably come to realize that the left navigation goes by several names, including the quick launch area, side navigation, and contextual navigation. For the purpose of this article, it’ll be referred to primarily as the left navigation, or left nav for short.)

If you recall from the article on branding the top navigation, SharePoint structures the items in the navigation as a big unordered list. Each link is contained in a <li> tag within a <ul> tag. The left nav area is structured exactly the same way. In fact, the left nav items share many of the same classes as the top navigation in SharePoint’s CSS. 

Fortunately, it’s easy to target only the left navigation items when we’re making custom CSS - in SharePoint 2013, the left nav area is all contained in a div with the ID “sideNavBox.” When writing CSS, you can put that ID before any classes you’re overriding to make sure your left nav styles don’t interfere with any top navigation styles you’ve created, since the two navigation areas share some common CSS classes. Some of the out of the box styles for the left navigation are also prefixed with a class of .ms-listMenu-verticalBox, which can also be used to target only the left navigation, but it’s much easier to type #sideNavBox when writing your CSS.

Structure of the Left Navigation
Let’s take a look at the basic structure of the left navigation:

<div id="sideNavBox">
   <div>
      <div>
         <div>
            <div>
               <ul>
                  <li>
                     <a>
                        <span>
                           <span>
                              Link Item Text
                           </span>
                        </span>
                     </a>
                  </li>
                  <li>
                    <ul>
                       <li>
                         <a>
                           <span>
                              <span>
                                 Link Item Text
                              </span>
                           </span>
                        </a>
                      </li>
                    </ul>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</div>

Once again, you can see that the left nav is similar in structure to the top nav area’s HTML structure.  Once you get through the nested containing <div> tags, the navigation is essentially a series of nested unordered lists. One of the big differentiators is that you don’t have to worry about any dynamic dropdowns or flyouts (at least, not if you’re using the out of the box navigation - there are way to force the left nav to have dynamic level flyouts but they can be difficult to manage, and that would be a topic for another time). Since you’re only focused on two static levels of navigation, as opposed to both the static and dynamic that the top nav sports, styling the left nav can be somewhat faster, since you can more eaily use similar styles for the two levels.

Let’s start at the top. Once again, the #sideNavBox div is your buddy when it comes to styling the left nav. The rest of the navigation is contained inside a handful of nested <div> tags that apply some basic styling to the navigation, such as positioning the navigation and removing some extra margins (that one is done by the class “ms-core-sideNavBox-removeLeftMargin” in case you find yourself needing to fix any margins set by that class). Once you actually get to the first <ul> tag, you have reached the actual navigation items.

All the navigation items are contained within the <ul> tag with a couple classes applied, namely static and ms-core-listMenu-root. Inside that <ul> tag are (as you’d expect) several <li> tags, and within each <li> tag is generally a link <a> tag. As mentioned previously, the left nav area can contain a second level of static links, and these links are stored in another <ul> tag within a <li> tag. From there, the structure remains exactly the same.

Styling the Left Navigation

With the cascading nature of CSS, you can easily apply styles to the various levels of navigation if your branding requires it, or you could keep it simple (as SharePoint 2013 does out of the box) and have all navigation items use the same basic styling. In the out-of-the-box styles, the second level of navigation is indented under its parent heading with some additional padding but otherwise matches the rest of the navigation items.  In a custom branding scenario, you might find yourself needing to apply unique styling to the second level items (such as a different background image or bullet image of some kind).

To get you started with your styling, we’ve put together another ugly stylesheet so you can see the various levels of branding. The table below shows you the various colors and what they’re coloring. Keep in mind that this style sheet is overkill for what you would probably need to do in your custom branding, and also has extra padding applied to the various levels of the navigation to help define where each level is, which you’ll most likely want to remove if you use this as a starting point.  At the very least, it’ll give you the classes and IDs that you will most likely be working with. The CSS file probably has more of the navigation styled than you’ll actually need to use (it’s likely you won’t care about hover states for the various levels of <li> tags or need to apply much to the overall <ul> tag, for instance) but at least you can see how the navigation is put together.

The table below outlines the various colors you’ll see in the examples and what element they’re applied to:

Color Applied to Notes
Yellow #sideNavBox
Lightblue
ul.ms-core-listMenu-root
Overall containing <ul> tag
Orange
li.static
Containing <li> tags
Lightgreen
.ms-core-listMenu-item
Link (in default state)
Red
ul.static
2nd static level of nav <ul> container
Pink
.ms-core-listMenu-item
2nd static level of navigation links
Lightgray
.menu-item-text
Text within link (applied to the <span> wrapping the text
Aqua
li.static
Hover color for <li> tag
Green
.ms-core-listMenu-item
Hover color for header of 2nd level static
Pink
.ms-core-listMenu-item
2nd static level of navigation links
Fuchsia
.ms-core-listMenu-item
Selected state for nav link

Left Navigation Branding Example

​Default State:
​Hover State for Header:
Hover State for Links:
Selected State:

Again, the CSS can be found here. Keep in mind that you can also apply selected state styles to the <li> tags as well, as the “selected” class is also applied to the parent <li> of the selected link.
 
BONUS TIP: Here’s how to hide left nav completely. In some instances, you may just not need the left nav area for your site. Or maybe just not for a particular page (the home page, for instance). Fortunately, it’s pretty easy to hide the left nav area with some simple CSS:

#sideNavBox { display:none; }
#contentBox { margin-left:20px; }

Basically, this CSS doesn’t display the left nav area at all, and resets the left margin of the main content holder to 20px so its padding is consistent with what the padding of the left nav would have been.

Putting this in your main style sheet will remove the left navigation completely from your site. In most cases (especially from an end-user experience) this isn’t a big deal, but there are some instances where the left nav would have been used to display something other than navigation - for instance, the calendar navigator on a calendar list would be missing, the left pane on the Change the Look section of the site, and a handful of other areas that have non-navigation content. In these instances, you may need to open your browser’s developer tools and click near the #sideNavBox area, and temporarily disable the styles you added.

A more common scenario is to keep the left nav on a site intact, but simply hide it for a particular page or two (such as the home page of the site or a departmental home page). Often in custom branding scenarios for SharePoint, home pages are a little more stylized than the rest of the site and may not show the left nav area until a visitor or user is further into the site. In this case, you can add those styles to a single page or to a page layout.

If you have a stylized home page, you probably have a custom page layout. Simply make sure you have your additional page head placeholder on your page layout and add in your styles as such:

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
   <style type="text/css">
      #sideNavBox { display:none; }
      #contentBox { margin-left:20px; }
   </style>
</asp:Content>

If you only need a single page in your site to not have the left navigation, you can add a script editor web part to the page and add your style block there as well.
Powered by SharePoint 2013 © 2016 Rackspace, US Inc.