Everyone seems to love accordion navigation effects and I love CSS so it was only natural to try to implement an accordion effect for SharePoint navigation using only CSS. Typically folks use JavaScript or jQuery to add in an accordion, but it is possible to do it with pure CSS. When it comes to SharePoint there is only one caveat – you can create a CSS only accordion menu as long as the accordion effect fires on hover and not when the navigation header is clicked. Let’s see why, and let’s see how…
If you want to skip the why and you can go straight to the how.

Pure CSS accordion menu effect, outside of SharePoint

There are lots of demos out there for creating an accordion menu effect using only CSS. All of these techniques have two types of content:

• What you click/mouse over to toggle the accordion (typically a header)
• What is hidden/displayed when you toggle the accordion (typically a block of content or a list of navigation items)

These techniques also rely on the presence of one of two HTML elements:

• Anchors where the href attribute points to a location within the page, for example:  <a href="#section">
• Form inputs (typically checkboxes)

Once all of these HTML elements are in place you can use CSS to style the headers and to hide the accordion content that should be displayed on toggle.  Then using CSS and the :checked pseudo-class for form inputs or the :target pseudo-class for the anchor,  the hidden accordion content is displayed when the user “checks” the form input or “clicks” the hyperlink (since the link has no real target the user is not taken to a different web page).  It is nice and tidy and widely supported with the exception of IE 6, 7 & 8.  For those browser versions you can use something like Selectivizr to create support.

Why this falls apart in SharePoint

The generated SharePoint navigation, like lots of areas within SharePoint, is locked down and you can’t edit the HTML that is generated for the menu.  Also by default, all of the navigation items are links to different pages so an accordion would be useless because when you selected an item it would not get a chance to show the hidden accordion content before it runs off and changes the page.

Insert custom headings via the Navigation settings

Luckily in SharePoint you can create your own navigation headers that don’t link to anything.  This takes care of the issue of the page changing when you want instead to show accordion content.  But when you don’t specify a target URL for a custom header in the SharePoint navigation settings, you only get the simple SPAN tags in the generated navigation HTML and not the anchor tag.  And unfortunately you can’t specify an in-page anchor like “#” or do other tricks like “javascript:function Z(){Z=''}Z()“. The result is you can’t include the anchor tag in your HTML. So this knocks out one of the two ways to show the accordion content (via clicking an anchor).

Going back to no custom HTML

Lest we forget that we can’t modify the HTML generated for the navigation, so there is no way to use the form input method either for showing accordion content.

The final verdict

Both of these methods…

• Code includes anchors where the href attribute points to a location within the page, for example:  <a href="#section">
• Code includes form inputs (typically checkboxes)

…are non-starters for SharePoint.  Hence why you can’t do an accordion menu that is activated via a user clicking navigation header text.

All is not lost, use the :hover pseudo class

One thing I love in CSS is the :hover pseudo-class. It isn’t picky, it doesn’t require an anchor tag.  You can slap that baby on to most anything and when you hover over that element on the page, be it a link, a header, a DIV or a random bulleted list item, it can have a hover effect.  By using the :hover pseudo-class we can find a compromise for an accordion styled navigation menu in SharePoint.

The ugly side of this approach

First off, a JavaScript or jQuery solution for an accordion effect is going to be the more elegant way to go.  You just get the flexibility you need once you move over to scripting.  However, if you need a CSS only solution it is possible.  There is just one burp along the way that creates some jagged usability.  More on that later.

Create an accordion on hover effect for SharePoint using only CSS

1. First you need to add the headers to the SharePoint navigation.  For this example I am using the quick launch nav (a.k.a. current navigation, a.k.a. left navigation bar) This can be done in SharePoint 2010 or SharePoint 2013 (managed or structured navigation).  Go to the SharePoint site settings and select Navigation. Create your headers, not specifying a target link.
2. Organize your links under the newly created headers.  For example:
   
3. Now you are ready to move to a custom CSS file. To hide the accordion content, which in this case is the two sets of links under Group Header 1 and 2, use the following CSS code for SharePoint 2013:

   .ms-core-listMenu-verticalBox li.static {
       height: 2em;
       overflow: hidden;
   }

   Or the following code for SharePoint 2010:

   .s4-ql li.static {
       height: 2em;
       overflow: hidden;
   }

   If your headings wrap to multiple lines *consistently*, you will need to adjust the height value. For example if all the headers wrap to two lines.  However if the headings have variable length text and some wrap to multiple lines while others do not, you will need to use different CSS. For this skip to step 5.

4. Next you need to add a little CSS to show the content when you hover over the group header. For SharePoint 2013 you will add this:

   .ms-core-listMenu-verticalBox li.static:hover {
       height: auto;
   }

   Or for SharePoint 2010 you will add this:

   .s4-ql li.static:hover {
       height: auto;
   }

   If this does the trick for you, you can skip step 5 and go to the next section.

5. If you have variable length headings, you will need to use different CSS. For SharePoint 2013:

   .ms-core-listMenu-verticalBox li.static ul.static {
       display: none;
   }
   
   .ms-core-listMenu-verticalBox li.static:hover ul.static {
       display: block;
   }

   Or the following code for SharePoint 2010:

   .s4-ql li.static ul.static {
       display: none;
   }
   
   .s4-ql li.static:hover ul.static {
       display: block;
   }

   This code works for structured or managed navigation and for any length heading. What you can’t do with this code is add a CSS3 transition to get an accordion slide effect (last section of this post).

Surprisingly, that is it! Now this CSS does not style your headers and content, it only gives you the hide/show effect. You can keep going to make it fancy.

The burp

Previously I mentioned there was a bit of a burp for usability when you use this method.  If you have more than one heading on your site, mouse over the first heading (and let the accordion content show), then mouse straight down to the next heading.  When you hit heading #2 the accordion content will show and heading #1 content will disappear, thus making heading #2 content slide up to take its place. If you have a short list of content, the heading #2 content will slide right out from under your mouse thus killing the hover state and heading #2 content will also disappear.

Adding more to the styles

From this point forward the code samples will be for SharePoint 2013. However, any of this CSS can be used for SharePoint 2010. Just replace .ms-core-listMenu-verticalBox with .s4-ql in the CSS style statements below.

It is also easier to comment out the CSS code that creates the hide/show for accordion content until you are done styling the menu.

Create basic formatting for the menu

Make the headers appear as links

The header text is just plain text that is not wrapped in an anchor tag. When the user hovers over the text they will not get the typical “hey pal, this is a link” style cursor.  So we need to add to the CSS to change the text to look like a link when you hover over it.

.ms-core-listMenu-verticalBox li > span.menu-item {
    cursor: pointer;
}

Add to the header formatting

You can continue to jazz it up:

/* Format the headers */
.ms-core-listMenu-verticalBox li > span.menu-item {
    cursor: pointer;
    background: #0171C6;
    color: white;
    border: solid #fff;
    border-width: 1px 0;
}

Add style to the accordion content

Next you can add some style to the accordion content:

/* Format the accordion list items */
.ms-core-listMenu-verticalBox a.menu-item {
    color:#000;
    background:#C9D4FF;
    border:1px solid #97C8F7;
    border-bottom:none;
}

Put in a hover effect and style the selected item

/* Format the header hover, list item hover and currently selected item */
.ms-core-listMenu-verticalBox li > span.menu-item:hover, /*Header */
.ms-core-listMenu-verticalBox a.selected, /* Selected */
.ms-core-listMenu-verticalBox a.menu-item:hover /* List item */{
    color:#FFF;
    background:#073D7D;
}

Add a CSS3 transition

If you want to get really fancy you can tweak the hide/show CSS code to include a CSS transition.  Just be aware that it will further accentuate the usability issue previously mentioned.

.ms-core-listMenu-verticalBox ul.root > li.static {
    max-height: 2em;
    overflow: hidden;
    transition: max-height 1s linear;
}

.ms-core-listMenu-verticalBox ul.root > li.static:hover {
    max-height: 500px;
}

As a follow up to the post Hide items from SharePoint Ribbon using CSS, here are a few more selectors to hide specific font faces from the font formatting options in the Ribbon.  I received a question from a SPTechCon Boston 2014 attendee about this and I have to say, I don’t blame the guy for not wanting to give his users 14 font face options for their content.   

This is a continuation of a previous post (Hide items from SharePoint Ribbon using CSS) so please check out that post first for more in-depth introduction information and how-to.

Hide font faces

The font face dropdown in the Ribbon provides two generic options, Body (theme font) and Heading (theme font). Next is 12 individual faces that vary from Calibri to Comic Sans to Times New Roman. Here are the CSS selectors to target in your custom CSS file to hide any one of these options:

Example code:

/* Hide Comic Sans, Segoe UI and Tahoma from the Ribbon */
#fseaFont-1-1-Menu,
#fseaFont-1-8-Menu,
#fseaFont-1-9-Menu {
	display: none;
}

 Hide font sizes

You can apply the same technique to remove some of the font size options as well.

Example code:

/* Hide font sizes 36, 48 and 72 from the Ribbon */
#fseaFontSize-0-5-Menu,
#fseaFontSize-0-6-Menu,
#fseaFontSize-0-7-Menu {
	display: none;
}

This is a quick but handy little CSS style statement to increase the width of the SharePoint 2013 top navigation bar drop down, which by default is pretty small.  Now I know ideally the navigation item text should be short and sweet, but I also know how folks love their long department names and the like in the navigation. 

What SharePoint does by default

When you have nested navigation items, the drop down menu will be dynamically assigned a fixed width that you will only see pop up in a browser inspection tool when you hover over the menu.  How the width value is calculated… honestly I have no idea because I have seen these values vary based on the length of the content within.  But it never shows a full width where longer navigation items DON’T have a text wrap, as shown below.

CSS to fix the fixed width

First you need to decide if you want a fixed width drop down (say 300 pixels or so) or if you want the width to stretch to contain whatever length of text is within.

The benefit to a fixed width is you will have consistency across your drop down menus with a uniform width and you don’t have to worry about really, really long navigation item names forcing your drop down to be huge.

The benefit to the automatic width on the other hand is you only create the space you need to take up and minimize what is covered up on the screen by the drop down.

Reset to new fixed width

/* Resize navigation fly-out width */
ul.dynamic {
  width: 300px !important;  /* !important needed to override inline SharePoint style */
}

Update the unit of measurement as needed.

Reset to auto size based on navigation item character length

/* Resize navigation fly-out width */
ul.dynamic {
  width: auto !important;  /* !important needed to override inline SharePoint style */
  white-space: nowrap;
}

The “white-space: nowrap” is what makes this method work, so don’t chop it off!

And in the end…

Here is the result:

Add in a bottom border and a little padding and it will actually start to look respectable!

ul.dynamic li {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
ul.dynamic li:first-child {
  border-top: 0;
}

Whether you are stuck in SharePoint or want to stick it to SharePoint or want to make things stick within SharePoint, sticky stuff in SharePoint is a hot topic.  I am going to focus on the latter.

What is sticky stuff?

More and more on the web you see web page components staying in a set location on the screen independent of how the page is being scrolled, or in the case of a footer, how short the page content is within a web page. Common sticky items are navigation bars, headers, contact us/chat now boxes,  sidebars and footers.

Sometimes the sticky item is “stuck” right away and there is no visual change as you scroll the page. Other sticky items have a starting position and then move and stick based on a page scroll. For example a web site has a 200 pixel tall header with a navigation bar underneath it. As the web page is scrolled the header scrolls away and the nav bar scrolls to the top of the page and remains there while the user continues to scroll down through the page content.

All of these sticky items can be implemented in SharePoint.

Sticky header (with or without navigation)

There is a big divide here for adding in a sticky header… will you be showing the SharePoint ribbon?  If it is an Intranet site the answer is likely yes.  If you are running a public facing brochureware type site, the answer is likely no.

Sticky header WITH the Ribbon

This is the easiest type of sticky element to add to your SharePoint site. This is because you can piggyback on the existing sticky aspect of the SharePoint ribbon.  OOTB, SharePoint is split into two panes – s4-ribbonrow and s4-workspace.  The s4-ribbonrow pane is fixed at the top of the web page and the content within s4-workspace scrolls separate from the ribbon.  Any web page components you add either above or within the s4-ribbonrow container will get the same fixed position treatment.

The following is a series of screenshots showing where content appears based on where you insert new HTML elements in the master page. Note in all of these examples the scroll bar remains connected only with s4-workspace and the size of the top pane changes as content is added to it.

Add HTML elements above or below the Suite Bar, but above and outside of the s4-ribbonrow container: 

Add HTML elements within or under the s4-ribbonrow. Note that added content within or after this container affects other components and creates some UI issues.

(This is a H1 added at the bottom of the s4-ribbonrow)

The best option would be to add your custom HTML elements above the s4-ribbonrow container (not within it or after it).

1. Open your custom master page file.
2. Search for and locate the s4-ribbonrow ID. It is likely attached to a DIV tag.
3. Add your custom HTML somewhere above and outside of the s4-ribbonrow HTML element.

Sticky header WITHOUT the Ribbon

If you have removed the ribbon or have code in place to not show the ribbon to certain levels of users, you can use traditional methods to add a sticky header.

1. Open your custom master page file.
2. Within the s4-workspace container, add your custom HTML header elements, adding a class or ID to the container.

   <div class="sticky-header">
   	<h1>This is a sticky header</h1>
   </div>

3. In your custom CSS file, add the following style statement, making modifications as needed:

   .sticky-header {
     background: #000;
     width: 100%;
     height: 40px;
     position: fixed;
     top: 0;
   }

4. At this point the header is stuck to the top of the web page, but showing on top of the web page content.
   
5. Add another style statement to your custom CSS file that shifts the page content down based on the height of the header.

   #s4-workspace {
     margin-top: 40px;
   }

You can alternatively add any SharePoint component that you want, such as the top nav bar (a.k.a. global navigation). Here is the result:

Sticky box – fixed

What was done above for “Sticky header WITHOUT the Ribbon” can be applied to any HTML element that you want located anywhere on the page.   All you have to do is modify the positioning.

1. Open your custom master page file.
2. Within the master page code, add your custom HTML element(s), adding a class or ID to the container. Because the HTML element will have fixed positioning on the page, it doesn’t  matter where you add the code.

   <div class="sticky-box">
   	<h1>This is a sticky box</h1>
   </div>

3. In your custom CSS file, add the following style statement, making modifications as needed:

   .sticky-box {
     background: #000;
     padding: 8px;
     position: fixed;
     left: 10px;
     bottom: 10px;
   }

Sticky box – scroll then fix

A popular UI element on web pages these days is to have an HTML element nested in the page design, then as you scroll the page the nested item moves to a new location and stays there as you continue scrolling.  For this effect you are going to need to also use some jQuery or JavaScript.

The plan

You will be adding the sticky item to your master page and creating two different CSS classes and style statements for the sticky item. The first one will be for the static view when you first load the page. The second will be modifications that will be used when you start to scroll the page. jQuery can then be used to switch in the scroll class based on page scroll.

The code

1. Open your custom master page file.
2. Within the master page code, add your custom HTML element(s), adding a class or ID to the container. For this example I am adding the code below the Quick Launch (current navigation) but within the sideNavBox HTML element (which is present in seattle.master).

   <div class="sticky-box-static">
   	<h1>This is a sticky box</h1>
   </div>

3. In your custom CSS file, add the following style statements, making modifications as needed:

   .sticky-box {
     background: #000;
     padding: 8px;
     margin-top: 20px;
     width: 130px;
   }
   
   #s4-workspace.scroll .sticky-box {
     position: fixed;
     top: 60px;
   }
   

   This is the result:
   

4. Now that the static version of the sticky box is in place, you can use a little jQuery to add in the other class on page scroll. Thanks to Chris Coyier’s post for the code bits. Add the following script to the BOTTOM of your master page file, before the closing BODY tag.

   <script type="text/javascript">
   	var wrap = $("#s4-workspace");
   
   	wrap.on("scroll", function(e) {
   
   	  if (this.scrollTop > 300 ) {
   	    wrap.addClass("scroll");
   	  } else {
   	    wrap.removeClass("scroll");
   	  }
   
   	});
   </script>
   

   This script watches for the page scroll to move to 300+ pixels from the top of the viewport. Once that happens, another CSS class (scroll) is being added to the s4-workspace container. The scroll class is referenced in our new CSS and adds the fixed positioning and sets a top pixel location for the fixed sticky box. If the page is scrolled back to less than 300 pixels, the added CSS class is removed.

5. This is a jQuery script and in order for it to work you need  a reference to include the jQuery library. Add the following to the HEAD of your master page file. You can grab the latest version of this library path from Google.

   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here is the result:

Sticky box – scroll then fix: alternative code

The above technique relies on you knowing the exact position for where the sticky box hits the top on scroll and should start to stick. In this example it is 300 pixels. If your sticky box is in a location that can change based on surrounding content, you can still use this technique but with a slight change to the code.  In our existing example, if you added items to the Quick Launch bar you would need to modify the value (300) in the jQuery script.  This isn’t practical if the Quick Launch bar length is changing all of the time, such as when you navigate from page to page.

1. Return to the jQuery script you added to the bottom of the master page.
2. Replace the script with the following (thanks to Dustin Miller for the code tweaks):

   <script type="text/javascript">
   	var wrap = $("#s4-workspace");
   	var stickytop = $('.sticky-box').offset().top;
   
   	wrap.on("scroll", function(e) {
   
   	  if (this.scrollTop > stickytop ) {
   	    wrap.addClass("scroll");
   	  } else {
   	    wrap.removeClass("scroll");
   	  }
   
   	});
   </script>
   

Here is the result:

The Suite Bar and ribbon make it look a little wonky because the class isn’t kicked in until the sticky box hits the top of the viewport.  If your design doesn’t include these elements, the result is much smoother:

This final version also includes some tweaks to the CSS:

.sticky-box {
  background: #000;
  padding: 8px;
  width: 130px;
}
#s4-workspace.scroll .sticky-box{
  position: fixed;
  top: 0px;
}
.ms-core-navigation {
  margin-bottom: 20px;
}

Spice up your sticky stuff with CSS3 transitions

If the sticky version of an item needs to change in size or some other style, you can create a smoother transition using CSS3.

Using the last technique and code bits as a springboard, all that needs to be done is to modify the existing CSS:

.sticky-box {
  background: #000;
  padding: 8px;
  width: 130px;
  transition: all 1s ease;
}
.sticky-box h1 {
  transition: all 1s ease;
}
#s4-workspace.scroll .sticky-box{
  position: fixed;
  top: 0px;
  background: blue;
}
#s4-workspace.scroll .sticky-box h1 {
  font-size: 20px;
  color: #fff;
}
.ms-core-navigation {
  margin-bottom: 20px;
}

Here is the result:

Sticky footer

Any pure CSS sticky footer solutions you find on the web will not work in SharePoint due to how it treats the s4-ribbonrow and s4-workspace containers.  The best thing to do is to use script, and Randy Drisgill has a solution posted.

What to do if your sticky stuff is under another element

Depending on where you add a sticky HTML element in your code, it is possible that another HTML element will appear on top of your sticky element. You can correct this easily with the z-index property in CSS. The trick is to understand how z-index works and not just slap in a z-index: 100000 like you see everywhere on the web.

HTML element stack order

As HTML elements are listed in the code, they are put in a stack.  It is like adding sheets of paper to pile one at a time.  The first piece of paper, or HTML element, is set on a table.  Then the second piece of paper, or second HTML element is placed next, and on top of it.  The third piece goes on top of the second, so on and so forth.

“Display” joins the party

When you are working with HTML elements, each one has a default display of inline or block.  A block element like a DIV forces it’s siblings to go on either side of the element.  It would be like spreading the three sheets of paper out on the table.  They are now next to each other, but they were still put down in an order.    If you set a negative margin on the second HTML element, it will slide on top of the first HTML element.  For our paper metaphor, you have just overlapped the second piece of paper partially over the first.

“Position” messes with your stuff

When you set absolute or fixed positioning, you are removing that HTML from the flow of the document so the surrounding HTML elements slide up and take the space the other element previously occupied. But the stack order is still intact. If you set a fixed position to element #1, element #2 is now on top of element #1, thus  potentially obscuring element #1.

Fix it with z-index

The default stack order can be altered in CSS using the z-index property.

.selector {
  z-index: 2;
}

The higher the z-index value, the higher in the stack order the element is.

What gets tricky about the stack order is when you introduce children elements. Each group of elements have their own stack order.  The following nested, numbered list shows the layering of elements and their children.  Note that each child list starts over with #1. For the paper metaphor, you would write on each existing piece of paper it’s respective children elements.

1. Element A (first piece of paper)
   1. First child of element A (written on page 1)
   2. Second child of element A (written on page 1)
2. Element B (second piece of paper)
   1. First child of element B (written on page 2)
   2. Second child of element B (written on page 2)
3. Element C (third piece of paper)
   1. First child of element C (written on page 3)
   2. Second chid of element C (written on page 3)

If you want First child of element A to show on top of Element C, you have to change the layer order of the parent to force Element A to be on top of Element C. If you were to target the child element and alter the stack order, you would only be affecting the stack order of the children elements. Think back to writing the child elements on the pieces of paper – you can’t make the first child listed on page 1 sit on top of the 3rd page without shuffling the pages.

My head hurts

Z-index can be confusing and seemingly complicated on the surface, but if you remember how it works with the parent/child relationships you will be able to fix your stack order by targeting the right element.  Below the z-index property has been added to the .sticky-box class.

.sticky-box {
  background: #000;
  padding: 8px;
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 3;
}

One last thing…

If adding the z-index property to your CSS doesn’t fix the issue, you probably need to specify a position property on the element you are trying to layer your sticky stuff on top of.

.item-under-sticky-box {
  z-index: 2;
  position: relative;
}

What the future holds

Just as a head’s up, as it does not have wide browser support at the time of this writing, the CSS3 spec includes a new “sticky” value for the position property.  The Mozilla Developer Network has the best summary of what the sticky property will do:

“Sticky positioning is a hybrid of relative and fixed positioning.  The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.”

In the future you can use sticky positioning to create pure CSS sticky stuff solutions and drop any jQuery or JavaScript you previously used.

This is a bit of an odd one… but I love to show examples of how simple CSS can meet your needs, however different they may be, for SharePoint and SharePoint web parts.  A student needed to convert the Project Summary web part countdown box to a single line above the rest of the web part content.  The following CSS can make this happen.

Project Summary Countdown

Here is how the Project Summary count down (task X due in X days) looks by default:

My student wanted it moved above the web part.  Here is the result:

Here is the CSS to accomplish this task:

/* =SharePoint Experts, Inc. - CSS for converting the Project Summary countdown box to a single line above the web part content. SharePoint 2013.
-sharepointexperience.com
*/


/* ---- Project Summary Web Part ---- */

/* Add space for countdown line between web part title and web part content */
	div[id^="OuterPanel"] {
		margin-top: 30px;
	}

/* Move countdown area to above web part contents */
	div[id$="CountDown"] {
		position: absolute;
		top: -30px; /* Match or closely mirror margin-top value above */
		width: 100%;
		border-right: 0;
	}

/* Remove default margin for countdown and main content area */
	.ms-psum-headlines-area {
		margin-left: 0 !important;  /* !important needed to override inline SharePoint style */
	}
	.ms-psum-countdown-contents {
		margin: 0;
	}

/* Collapse countdown text components into one line */
	.ms-psum-heading-task-text,
	.ms-psum-heading-text{
		float: left;
		width: auto;
		line-height: 1.5em;  /* Required to create consistent vertical spacing */
	}

/* Add to sides of center text to create the look of character spaces */
	.ms-psum-heading-text {
		padding: 0 5px;
	}

/* Adjust formatting of actual countdown to match rest of text */
	.ms-psum-countdown-number {
		font-size: 1.5em;  /* Match OOTB SharePoint font size for rest of countdown text */
		line-height: 1.5;   /* Required to create consistent vertical spacing */
	}


/*
SharePoint Experts, Inc.
sharepointexperience.com
*/

The niftier bit of this code snippet is the use of attribute selectors (lines 9 and 14) to target a couple of DIVs that have some hairy looking IDs. By using an attribute selector we can create a simpler CSS selector and stay away from things like this:

#OuterPanel_ctl00_ctl39_g_6785cfab_4428_4818_909a_ee39d0563e77  {
	margin-top: 30px;
}

I don’t know about you, but once an ID hits 61 characters, it gives me the heebie jeebies. No human created that ID and I don’t trust auto generated IDs to remain consistent as I move from SharePoint site to SharePoint site or from environment to environment.

SharePoint 2013 switched from using the text “Site Actions” to showing a gear/cog/wagon wheel icon (I like gear so we will go with that for this post). That is all well and good until you need to change the background to a darker tone or if you want to change the color of the gear icon. SharePoint 2013 inserts in the icon image via HTML *cringe* thus making it more difficult to update to match your color scheme. With a little CSS we can knock out the default image and show our own icon instead.

The Problem

You want to alter the background color that happens to run behind the Site Actions gear icon (on-premises). Whether it is updating the Suite Bar background or if you have moved the Site Actions control in the master page or via CSS to a new location, you need to go from light to dark, yet the gear icon is a dark gray color. For example if I added this to my CSS:

#suiteBarRight {
  background: #000;
}

You would end up with this:

Ewww.

The Solution

Using a little bit of CSS and one of two options, you can easily switch in a new icon. This solution only works for on-premises SharePoint and not SharePoint Online. 

Option 1 – My preferred method

Icon fonts are one of the better things to hit the CSS world lately, and can really come in handy, especially in situations like this. The nice thing about icon fonts is you can control the size and color of the icon through CSS.

There are lots of options out there, including building out your own icon font file with only the icons that you need. This may be the best choice if you are doing this for an intranet.

A few icon font options:

• FontAwesome – link to the externally hosted font file and use freely in your CSS.
• Fontello – build and download icon web font files. Add the font files to your SharePoint site and reference it internally.  This may be best for intranets and similar sites if you run into issues with users being prompted to authenticate several times for their SharePoint site.
• Top 50 Free Icon Fonts for Web Design
• The Big List of Flat Icons & Icon Fonts

For this demo we will use FontAwesome, it is quick and easy to use and doesn’t require file generation or implementation.

The code bits

In your custom CSS file, add the following code at the top of your CSS file, above any style statements:

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

FontAwesome updates frequently, so please check to see if you are using the latest version. At the time of this posting, it was 4.4.0. You can check for the latest version and update your code accordingly.

Now add the following CSS style statements.  The provided comments indicate what each declaration does and is not required in your final code.

Hide the default gear icon:

/* Hide Site Actions gear icon */
.ms-siteactions-imgspan {
	display: none;
}

Insert in a new icon using FontAwesome. The unicode character property in the content declaration is what pulls the right icon. You can view all available icons.

/* Insert new Site Actions gear icon - allows for icon color change */
.ms-siteactions-normal > a:before {
	content: "\f013";  /* Unicode character for icon font */
	font-family: FontAwesome;   /* Icon font - requires @import listed at top of file */
	color: #fff;  /* Icon color */
	font-size: 16px;  /* Icon size */
	font-weight: normal; /* Removes default bolding that can occur with icon font */
	padding-top: 7px;  /* Spaces down icon from top */
	display: block;  /* Forces respect of padding */
}

Here is the result:

If you don’t like the single gear (cog) icon provided by FontAwesome, you can alternatively try the following for the unicode character property in line three. Be sure to leave the backslash, it properly escapes the code:

• f085 – multiple gears (cogs)
• f0ad – wrench
• f141 – ellipses
• f040 – pencil

Only thing left to do is clean up some hover effect stuff.

/* Remove OOTB Site Actions hover (appears as underline under icon) */
.ms-siteactions-normal > a:hover {
	text-decoration: none;
}

/* Set gear icon hover color */
.ms-siteactions-normal > a:hover:before {
	color: #7AC7FF;
}

/* Remove OOTB Site Actions hover */
.ms-siteactions-hover {
	background: transparent;
	border-right-color: transparent;
}

You are done! Now I will say I don’t use FontAwesome as described on their site. Their site suggests adding mark-up and in SharePoint, we don’t often have that luxury. The way I use it above via a :before pseudo element is completely supported, and is just another way to do things.

Option 2

Option 2 is similar to option 1 in that we will hide the default gear icon and set something new. Instead of using an icon font, you could use a custom image. All you need is the following code, updating the image URLs on lines 9 and 17.

/* Hide Site Actions gear icon */
.ms-siteactions-imgspan {
	display: none;
}

/* Insert new Site Actions image */
.ms-siteactions-normal > a:before {
	content: "";  /* Required for pseudo element */
	background: url("http://placekitten.com/g/20/20");  /* Image URL */
	height: 20px;  /* Height of image */
	width: 20px;  /* Width of image */
	display: block;  /* Forces respect of width and height */
}

/* Set Site Actions image hover */
.ms-siteactions-normal > a:hover:before {
	background: url("http://placecage.com/20/20");  /* Hover image URL */
}

/* Remove OOTB Site Actions hover */
.ms-siteactions-hover {
	background: transparent;
	border-right-color: transparent;
}

That’s it!

Just over a year ago I wrote a post about stacking the SharePoint 2013 Suite Bar on top of the Ribbon, thus collapsing down the needed real estate for the top area of your SharePoint site.  I was asked this week if it was possible to do it for SharePoint Online / Office 365. As with SharePoint 2013 on-premises, you can accomplish this with CSS – it just takes a few more lines of code to pull it off. 

If you are looking for a solution like this for SharePoint 2013 on-premises, please check out the sister post, Stack the SharePoint 2013 Suite Bar on top of Ribbon.

This post is going to sound a lot like the last one, Stack the SharePoint 2013 Suite Bar on top of Ribbon, because let’s face it, we are doing the same thing, just for a different flavor of SharePoint.

Step 1: Hide unnecessary components in the Suite Bar, if desired

If you look at the Suite Bar, the items on the left (Office Apps Launcher, Office 365 logo and the Sites button) aren’t necessarily required – it depends on your use of SharePoint Online. The right side on the other hand has some pretty vital stuff (most notably Site Actions).

If you look at the Ribbon, items on the right are important but items on the left (sharing, focus on content toggle, etc.) are less so.

These two areas can be collapsed down to reduce the needed space for the Suite Bar and the Ribbon at the top of your site.

If you want to keep the left side Suite Bar tools (Office Apps Launcher, Office 365 logo and the Sites button) you certainly can, just skip this step.

You can hide the unnecessary items with the following CSS:

/* Hide Suite Bar elements */
#O365_MainLink_NavMenu, /*Office 365 App Dashboard link */
.o365cs-nav-header16 .o365cs-nav-topItem.o365cs-nav-o365Branding, /* Office 365 Logo */
#O365_MainLink_Logo + .o365cs-nav-appTitleLine, /* Divider between Office 365 logo and Sites button */
.o365cs-nav-topItem a[aria-label="Go to team sites"], /* Sites button */
#O365_MainLink_Help /* Help button (OPTIONAL) */ {
	display: none;
}

Step 2: Hide unnecessary components in the Ribbon

Use this CSS to hide the right side Ribbon components:

/* Hide right-side Ribbon options */
#RibbonContainer-TabRowRight {
	display: none !important;  /* !important needed to override SharePoint inline style */
}

Step 3: Float the Suite Bar

Next the Suite Bar needs to be removed from the flow of the document so the Ribbon area can slide up to the very top of the page. You can do this with a simple float:

/* Float the Suite Bar to remove from document flow and allow ribbon to move up */
#suiteBarDelta {
	float: right;
}

Works great but the Suite Bar is under the Ribbon area.

Step 4: Stack the Suite Bar to show on top of the Ribbon

The DIV that wraps the Suite Bar is before the DIV that wraps the Ribbon, so their natural stacked order is for the Ribbon to be on top.  Trying to fix this by targeting the Suite Bar and altering the stacking order (z-index) doesn’t work, but you can target the Ribbon and alter the stacking order for that instead.

/* Alter stacking order */
#s4-ribbonrow {
	z-index: -1; /* Allows Suite Bar to show on top of Ribbon */
}

This works, but renders the Ribbon useless because you can no longer click on the Ribbon tabs. Add a little secret sauce in the form of position:static to get this working again:

/* Alter stacking order and set positioning for ribbon */
#s4-ribbonrow {
	z-index: -1;  /* Allows Suite Bar to show on top of Ribbon */
	position: static;  /* Secret sauce - needed to maintain ribbon functionality */
}

And the final result:

Step 5: Match up the height of the Suite Bar and Ribbon

Since the Suite Bar in SharePoint Online is taller than SharePoint 2013 on-premises we need to make some further adjustments to match up the Suite Bar height to the Ribbon or vice versa. Pick the one you want and implement the following code accordingly:

Match Suite Bar to Ribbon height

Add the following CSS to reset the Suite Bar components to match the ribbon height of 33 pixels. You will need to set the width for the first style statement based on what you have opted to show in the Suite Bar.

/* Use one of the following widths based on what is displayed in the Suite Bar: */
#suiteBarDelta {
/* Notifications, Site Actions and Profile Pic only */
	width: 139px;
/* Notifications, Site Actions, Help and Profile Pic only */
	/* width: 189px; */
/* All Suite Bar options */
	/* width: 430px;  */
}

/* Reset Suite Bar container height */
#suiteBarTop {
	height: 33px !important;  /* !important needed to override SharePoint inline style */
}

/* Change height of nested components in Suite Bar */
#suiteBarDelta .o365cs-nav-header16,
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-o365Branding,
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-button,
#suiteBarDelta .o365cs-me-tileview,
#suiteBarDelta .o365cs-me-presence5x50,
#suiteBarDelta .o365cs-me-tileimg-doughboy,
#suiteBarDelta .o365cs-me-tileimg {
	height: 33px;
}

/* Change width of nested components in Suite Bar */
#suiteBarDelta .o365cs-me-tileview,
#suiteBarDelta .o365cs-me-tileimg{
	width: 33px;
}
#suiteBarDelta .o365cs-nav-header16 .o365cs-me-nav-item {
	min-width: 38px;
}

/* Reset Suite Bar Text (if showing Office 356 and Sites) */
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-brandingText {
	font-size: 16px;
	line-height: 1;
	margin-top: -5px;
}

/* Reset profile pic image size */
#suiteBarDelta .o365cs-me-personaimg {
	height: 33px;
	width: 33px !important;  /* !important needed to override SharePoint inline style */
}

/* Alter location of notification number bubble */
#suiteBarDelta .o365cs-flexPane-unseenCount {
	top: 15px;
	left: 5px;
}

Here is the final result:

Match Ribbon to Suite Bar height

Alternatively use the following code to match the Ribbon to the Suite Bar height of 50 pixels. You will need to set the width for the first style statement based on what you have opted to show in the Suite Bar.

/* Use one of the following widths based on what is displayed in the Suite Bar: */
#suiteBarDelta {
/* Notifications, Site Actions and Profile Pic only */
	width: 156px;
/* Notifications, Site Actions, Help and Profile Pic only */
	/* width: 206px; */
/* All Suite Bar options */
	/* width: 490px;  */
}

/* Override inline style height to match Suite Bar height */
#s4-ribbonrow {
	height: 50px !important;  /* !important needed to override SharePoint inline style */
}

/* Increase height of nested Ribbon containers */
#globalNavBox,
.ms-cui-topBar2,
.ms-cui-tts, .ms-cui-tts-scale-1, .ms-cui-tts-scale-2,
.ms-cui-tt, .ms-cui-cg {
	height: 50px;
}

/* Space down Ribbon tabs */
.ms-cui-tt-a {
	margin-top: 19px;
}

And the result:

A note about the width property

The width business in this last step is a pain at best. The better solution would be to set the width to auto and let it naturally expand to the amount of space needed for the visible Suite Bar items. Unfortunately the auto value wasn’t working in IE or Chrome in this particular case. So setting an exact width was the alternative.

Final code

Note that the code below has BOTH height solutions. If you use this as is in SharePoint, the Ribbon will increase in height and the Suite Bar will decrease in height. You need to pick one or the other and delete out the unnecessary solution.

/* ---- Common Rules ---- */

	/* Hide Suite Bar elements */
		#O365_MainLink_NavMenu, /*Office 365 App Dashboard link */
		.o365cs-nav-header16 .o365cs-nav-topItem.o365cs-nav-o365Branding, /* Office 365 Logo */
		#O365_MainLink_Logo + .o365cs-nav-appTitleLine, /* Divider between Office 365 logo and Sites button */
		.o365cs-nav-topItem a[aria-label="Go to team sites"], /* Sites button */
		#O365_MainLink_Help /* Help button (OPTIONAL) */ {
			display: none;
		}

	/* Hide right-side Ribbon options */
		#RibbonContainer-TabRowRight {
			display: none !important;  /* !important needed to override SharePoint inline style */
		}

	/* Float the Suite Bar to remove from document flow and allow ribbon to move up */
		#suiteBarDelta {
			float: right;
		}

	/* Alter stacking order and set positioning for ribbon */
		#s4-ribbonrow {
			z-index: -1;  /* Allows Suite Bar to show on top of Ribbon */
			position: static;  /* Secret sauce - needed to maintain ribbon functionality */
		}


/* ----------------------- Correct Height of Bars ----------------------- */

	/* ---- To force Suite Bar to match Ribbon height ---- */

		/* Use one of the following widths based on what is displayed in the Suite Bar: */
			#suiteBarDelta {
			/* Notifications, Site Actions and Profile Pic only */
				width: 139px;
			/* Notifications, Site Actions, Help and Profile Pic only */
				/* width: 189px; */
			/* All Suite Bar options */
				/* width: 430px;  */
			}

		/* Reset Suite Bar container height */
			#suiteBarTop {
				height: 33px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Change height of nested components in Suite Bar */
			#suiteBarDelta .o365cs-nav-header16,
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-o365Branding,
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-button,
			#suiteBarDelta .o365cs-me-tileview,
			#suiteBarDelta .o365cs-me-presence5x50,
			#suiteBarDelta .o365cs-me-tileimg-doughboy,
			#suiteBarDelta .o365cs-me-tileimg {
				height: 33px;
			}

		/* Change width of nested components in Suite Bar */
			#suiteBarDelta .o365cs-me-tileview,
			#suiteBarDelta .o365cs-me-tileimg{
				width: 33px;
			}
			#suiteBarDelta .o365cs-nav-header16 .o365cs-me-nav-item {
				min-width: 38px;
			}

		/* Reset Suite Bar Text (if showing Office 356 and Sites) */
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-brandingText {
				font-size: 16px;
				line-height: 1;
				margin-top: -5px;
			}

		/* Reset profile pic image size */
			#suiteBarDelta .o365cs-me-personaimg {
				height: 33px;
				width: 33px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Alter location of notification number bubble */
			#suiteBarDelta .o365cs-flexPane-unseenCount {
				top: 15px;
				left: 5px;
			}



/* ----------------------- OR ----------------------- */



	/* ---- To force Ribbon to match Suite Bar height ---- */

		/* Use one of the following widths based on what is displayed in the Suite Bar: */
			#suiteBarDelta {
			/* Notifications, Site Actions and Profile Pic only */
				width: 156px;
			/* Notifications, Site Actions, Help and Profile Pic only */
				/* width: 206px; */
			/* All Suite Bar options */
				/* width: 490px;  */
			}

		/* Override inline style height to match Suite Bar height */
			#s4-ribbonrow {
				height: 50px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Increase height of nested Ribbon containers */
			#globalNavBox,
			.ms-cui-topBar2,
			.ms-cui-tts, .ms-cui-tts-scale-1, .ms-cui-tts-scale-2,
			.ms-cui-tt, .ms-cui-cg {
				height: 50px;
			}

		/* Space down Ribbon tabs */
			.ms-cui-tt-a {
				margin-top: 19px;
			}

Be it clowns, creepy movies, dark basements with a single dingy light bulb or the next presidential candidate, we all have our fears. What I don’t want anyone to be afraid of is adding some custom CSS to their SharePoint site. With the push to not use custom master pages in SharePoint Online / Office 365, more and more people are looking for alternatives on how to pull off small tweaks (and even big ones) in their SharePoint site user interface that doesn’t involve custom master pages.

CSS isn’t for everybody, but…

I loooooove CSS and would happily pack a picnic for a sunny afternoon leaning against a tree whispering sweet nothings to CSS code – ok that is a bit much but you get my drift. CSS is a great tool to quickly and efficiently make UI modifications that range anywhere from changing out a logo, to completely hiding something from web site users.  But when you aren’t used to it, CSS can be weird and intimidating and flat out just look a little funny.   I don’t want to push anyone to use something that they aren’t comfortable with. However…

There is only so much you can do with SharePoint Site Settings

While it would be nice, there just isn’t a setting available via the browser for everything you may want to change about the SharePoint UI.  Most customizations require custom code.

CSS is a low impact solution

Quick to pull together, implement and apply, CSS is an ideal solution for many UI changes and challenges in SharePoint.  Other code languages can have a steeper learning curve, can be more involved to implement, and can have a farther reaching impact across your SharePoint site. CSS files are small, fast to download and easy to update on the fly. You don’t have to package anything up, deploy anything, redeploy anything, etc. CSS can simply just be easier to manage. Plus while CSS gone awry may make things look funny or seemingly disappear from your user interface, it won’t break your site like other custom code solutions can.

It’s time to take the plunge

You don’t have to learn CSS in order to implement CSS snippets that have been written by other individuals. Any familiarity that you have or gain will certainly help, but it isn’t required. You can know what a car engine looks like without knowing how to put a new one in a vehicle.

Easiest way to implement custom CSS in your SharePoint site

If you are running publishing sites on SharePoint Online/Office 365 or on-premises with SharePoint 2013, you have access to a handy setting that will allow you to link to a CSS file if your choosing.

If you are running top-level non-publishing sites (such as Team Sites), you have to either edit the master page or use a more advanced code method to add a CSS file to your site. The exception would be if you are wanting single page changes. In that case you can add custom CSS via the Script Editor web part.

• JavaScript injection, Delegate Control and Custom Action – if you aren’t comfy with code, none of these may be for you as they are all advanced techniques.
• Script Editor Web Part – if you have changes on one or maybe a few pages, you can use this web part to add CSS. The problem is the CSS will only be applied to that single SharePoint web page, so this isn’t a good solution for an entire site that needs changes.
• Edit the master page – I know this is what you may want to avoid, but honestly this is the easiest and quickest solution.

Bottom line is that SharePoint non-publishing sites aren’t set up well to handle CSS additions unless you get into customizing your master page – which out of the three options really is the fastest and most efficient.

Child team sites under a publishing site are the exception to this rule. Since they are a child of a publishing site, they can inherit the CSS settings from the parent site.

Are you unsure if you have a publishing site or not? Jump to Step 3.1 and 3.2 below.  If you don’t see “Master page” in the Site Settings, you don’t have a publishing site.

How to add a custom CSS file to your SharePoint site

Step 1: Create the CSS file

1. Create a CSS file. You can use simple tools like Notepad, Notepad++ or TextEdit (first go to Format -> Make Plain Text so you can save a CSS file). You can use more advanced code editors like Sublime Text or SharePoint Designer, or go all out and use something like Dreamweaver. Bottom line is you don’t have to purchase software to create a CSS file. A free text editor like Notepad works just fine. All of the linked tools above are free or have an unlimited free trial (Sublime Text).
2. Create a new file, add the CSS code and save the file, making sure it has the .CSS file extension.

Step 2: Add the CSS file to SharePoint

1. The new CSS file can live anywhere you like within the SharePoint framework. Some suggested locations:
   • Style Library – access via Site actions -> Site content.
   • Site Assets Library – access via Site actions -> Site content.
   • SharePoint Web Server – requires access to the server. One suggested file location is TEMPLATE/LAYOUTS/1033/STYLES/CUSTOM FOLDER YOU CREATE.
2. For Style Library or Site Assets Library, you can upload the file via a mapped network drive, via SharePoint Designer, or via direct upload through the browser.
3. Check in and publish the file.
   • SharePoint Online/Office 365: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Advanced -> Check In.  Choose the  1.0 Major version (publish) radio button option and select OK.
   • On-premises: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Publish a Major Version.  Select OK in the modal window.
   • SharePoint Designer: Right click on the file and select Check In. Select the Publish a major version radio button and then select OK.

Step 3: Apply the CSS file

1. Go to Site actions -> Site settings.
2. Select Master page under the Look and Feel column.
3. Expand the Alternate CSS URL section at the bottom of the page.
4. Select the Specify a CSS file to be used by this site and all sites that inherit from it radio button.
5. Select the Browse button. Navigate to the location of your CSS file and select the file.  The modal window will automatically open the Style Library for you.
   If you added the CSS file on the web server, you will need to manually enter in the URL based on where you saved the file. For example if you added the file to the suggested location above, you would enter in /_layouts/1033/styles/CUSTOM FOLDER/FILE_NAME.css.
6. Select Insert.
7. Optionally check to Reset all subsites to inherit this alternate CSS URL (on-premises only).
8. Select OK in the Site Master Page Settings screen.
9. Your custom CSS will be applied to the site.

Step 4: Edit your CSS file moving forward

Any time you need to make changes to the file, go to the location where you saved the file. Check out the file (if in the Style Library or Site Assets Library). Make your changes and save the file. You can do this through a mapped network drive, SharePoint Designer, or by re-uploading an updated copy of the CSS file.  Check in and publish your file (see Step 2.3 above) and your changes will appear to you and all of your site users.

Want to edit your master page?

Be sure to check out Part 2: “CSS scares me!” – Implement Custom CSS in SharePoint Master Pages.

Starting to like CSS some?

Let me convince you even more. Check out my SharePoint CSS Experience course.  One day is spent on learning how to write CSS, and the second day is spent on totally rebranding SharePoint 2010 and 2013 using CSS only. And you won’t once touch JavaScript, master pages or anything outside of glorious CSS.  

As a follow up to the previous post, “CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint, this second part is going to cover how to add a CSS file reference to your SharePoint master page. 

For an introduction, check out the first post.  We are going to jump right into it for this post.  Steps 1 & 2 have been repeated below for your convenience.  Also, this post is not for Design Manager!

How to add a custom CSS file to your SharePoint site

Step 1: Create the CSS file

1. Create a CSS file. You can use simple tools like Notepad, Notepad++ or TextEdit (first go to Format -> Make Plain Text so you can save a CSS file). You can use more advanced code editors like Sublime Text or SharePoint Designer, or go all out and use something like Dreamweaver. Bottom line is you don’t have to purchase software to create a CSS file. A free text editor like Notepad works just fine. All of the linked tools above are free or have an unlimited free trial (Sublime Text).
2. Create a new file, add the CSS code and save the file, making sure it has the .CSS file extension.

Step 2: Add the CSS file to SharePoint

1. The new CSS file can live anywhere you like within the SharePoint framework. Some suggested locations:
   • Style Library – access via Site actions -> Site content.
   • Site Assets Library – access via Site actions -> Site content.
   • SharePoint Web Server – requires access to the server. One suggested file location is TEMPLATE/LAYOUTS/1033/STYLES/CUSTOM FOLDER YOU CREATE.
2. For Style Library or Site Assets Library, you can upload the file via a mapped network drive, via SharePoint Designer, or via direct upload through the browser.
3. Check in and publish the file.
   • SharePoint Online/Office 365: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Advanced -> Check In.  Choose the  1.0 Major version (publish) radio button option and select OK.
   • On-premises: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Publish a Major Version.  Select OK in the modal window.
   • SharePoint Designer: Right click on the file and select Check In. Select the Publish a major version radio button and then select OK.

Step 3: Add a reference to the CSS file from the master page

1. Check out (if needed) and Open the master page file applied to the web site. You can determine which file is applied by doing the following (this first method applies to publishing sites only):
   • Go to Site actions -> Site settings.
   • Select Master page under the Look and Feel column.
   • See what master page is set for Site Master Page. This is the master page being applied to your publishing web pages.
2. Or, if you are in a non-publishing site you can do the following:
   • Open your SharePoint site in SharePoint Designer.
   • In the Site Objects navigation pane on the left, select Master Pages.
   • Right click on a master page file and see if Set as Default Master Page is grayed out. Keep doing this until you find the master page file with Set as Default Master Page already grayed out. Your winner is the same file that is applied as the master page for the site.
3. You can open the master page file via SharePoint Designer, via a mapped network drive, or by downloading the master page file to your desktop (Site Actions -> Site Settings -> Master pages and page layouts -> locate file and select the arrow -> Download a copy) and then opening the file in a code editor of your choice. Refer back to the list in Step 1.1 for application suggestions, although I don’t suggest messing with Dreamweaver in this case.
4. Once you have the file open, run a search/find for DeltaPlaceHolderAdditionalPageHead. You should end up here:

   <SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">

5. BEFORE that tag you need to add the following:

   <link rel="stylesheet" type="text/css" href="PATH-TO-YOUR-CSS-FILE/FILE-NAME.css" />

6. Update the HREF path to reflect the location of your CSS file.
7. If you added the file to the Style Library, you would enter in /Style Library/CUSTOM FOLDER (optional)/FILE-NAME.css.
   If you added the file to Site Assets, you would enter in /SiteAssets/CUSTOM FOLDER (optional)/FILE-NAME.css.
   If you added the CSS file on the web server, you would enter in /_layouts/1033/styles/CUSTOM FOLDER (optional)/FILE-NAME.css.
8. Save your file.
9. Check in (if needed), upload (if you downloaded a local copy) and/or publish the file (if in a publishing site).
10. Your custom CSS will be applied to the site.

Step 4: Edit your CSS file moving forward

Any time you need to make changes to the CSS file, go to the location where you saved the CSS file. Check out the file (if in the Style Library or Site Assets Library). Make your changes and save the file. You can do this through a mapped network drive, SharePoint Designer, or by re-uploading an updated copy of the CSS file.  Check in and publish your file (see Step 2.3 above) and your changes will appear to you and all of your site users.

Starting to like CSS some?

Let me convince you even more. Check out my SharePoint CSS Experience course.  One day is spent on learning how to write CSS, and the second day is spent on totally rebranding SharePoint 2010 and 2013 using CSS only. And you won’t once touch JavaScript, master pages or anything outside of glorious CSS.  

That is a mouthful of a title but luckily this is a simple fix for an annoying bug in SharePoint 2013.  Between SharePoint 2010 and 2013, the DynamicHorizontalOffset and DynamicVerticalOffset properties in the AspMenu control became useless because of how the drop down menus are styled in CSS by SharePoint.  You can set these properties all day long and nothing comes of it.  So abandon that and just use the following CSS fix.

The Problem

You are utilizing drop down menus (fly out menus) in your SharePoint 2013 site and you want to change the default location of the menu. Maybe the drop down menu overlaps a larger navigation bar or button styling that you have implemented. For example:

There are two properties available for the Menu control, DynamicHorizontalOffset and DynamicVerticalOffset, that allow you to control the placement of the dynamic (their fancy word for drop down) menu.  In SharePoint 2010 these worked great.  SharePoint 2010 also had a table based layout for navigation.

With the move to list based navigation in SharePoint 2013, CSS is used more heavily for navigation design and display.  If you dig around in the CSS you will find the following:

• The drop down menus are hidden from the page using absolute positioning and large, negative top and left values.  If you want proof, add this to your site:

  ul.dynamic {top: 0; left: 0;}

• When you hover over a static (another fancy word they use that means the stuff that is always showing) navigation list item (LI) that has a child drop down menu, the parent list item gets another class added (hover) and the nested drop down menu list container (UL) has inline styles added. OUCH.
• When you move back off the static list item (LI) the hover class is removed and a new class is added, hover-off (but only temporarily).
• These are actual classes that are being added, hover and hover-off, NOT :hover pseudo classes that appear in the CSS file only.

The inline styles are preventing anything the Dynamic Vertical Offset and Dynamic Horizontal Offset values could be doing for you.

The Fix

With a little CSS you can manually set your own positioning for the drop down menu:

.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover > ul.dynamic,
.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover-off > ul.dynamic{
	top: 55px !important;  /* !important added to override inline SharePoint style */
	left: -15px !important;  /* !important added to override inline SharePoint style */
}

And here is the result:

A few notes about the above CSS code:

• You can and may need to alter the opening class in the selector. Right now it is set to .ms-core-listMenu-horizontalBox which will target the top navigation (global nav) in a site using Seattle.master. This may need to be altered if you are using a custom master page or have stripped out the code that generates this class.
• You will need to tweak the top and left values to fit your design.
• The further away you set the physical menu placement, the more you increase your chances of losing the hover menu. The placement change is based on the presence of the hover class, which is only added when you hover over the static menu item. Once you move off the static menu item and the hover class is dropped, the drop down menu will disappear before you can get your cursor over an item and select it.  However you can make changes to get around this issue (see below).
• Including the hover-off as a variation of the selector (line 2 in the above code) helps offset the issue of the menu disappearing too quickly when you hover off the static menu item, but only by a little bit.  However…
• You need to include the hover-off as a variation of the selector (line 2 in the above code). Without it you will get very ugly menu jumping.

Forcing the Drop Down Menu to Continue to Show with Large Spacing

This whole fix depends on the presence of the hover class when you are mousing over the static item. As long as you stay hovered over that item, you won’t lose the placement of your drop down menu. But what if you want a larger space between the bottom of the static item and the drop down menu? You can increase the size of the static menu item on the sly using a bottom margin.

In the below code sample, the drop down menu is set even further away from the static menu item:

.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover > ul.dynamic,
.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover-off > ul.dynamic{
	top: 75px !important;  /* !important added to override inline SharePoint style */
	left: -15px !important;  /* !important added to override inline SharePoint style */
}

But when you mouse off the static nav item, the drop down menu disappears before you can get to it in order to select something.

If I add a larger bottom margin to the navigation items, this problem clears up.

.ms-core-listMenu-horizontalBox ul.static > li > a {
    margin-bottom: 35px;
}

Adding this bottom margin may cause other issues in your design, but they should be rather easy to patch up.