This is a quick post to show the CSS I used to style the global navigation / top navigation in SharePoint 2013.
I’ve used bright and different colours to make each CSS section easy to identify. The top level is in blue, when you hover over a link it changes to aqua. Hovering over a drop down item changes it to lime.
By default SharePoint wraps the menu item text, producing a result as below.
In order to ensure all each menu item is displayed on one line I had to update ul.dynamic as below, using min-width, white-space: no wrap and word-wrap: normal.
This is the result.
Richard Skinner 
Hi Richard,
Have you tried applying this styling to nested/hierarchical global navigation in SP2013 yet? I’ve got a site where the global nav is driven by a three-level MMD term set, and I’m running into trouble with the wrapping still happening. I’ve tried applying the min-width, white-space, and word-wrap properties to try to find the right elements to style…but I keep getting white space wrapping in my cascading global nav menus.
Any thoughts?
Thanks!
I’ve successfully applied this to a three level hierarchical navigation in SP 2013. Have you tested the latest CU? I’m running the Oct 13 CU (KB 2825647) as previously I wasn’t able to display a hierarchical navigation at all The bug was fixed in the August 13 CU (KB 2817616).
I’m not sure what the latest CU is that I’m working against; I have a question in with my admin team to try to find out, but I think we’re relatively close to up-to-date. I can get the hierarchical navigation to work, but where it’s failing for me is in applying the min-width, white-space, and word-wrap properties to the ul{} element…doesn’t seem to be having the intended (or any) effect. I’m sorry, I realize now in reading my comment from yesterday that I didn’t make that clear.
I’ve tried applying the style properties to ul{}, li{}, span.menu-item-text, a.ms-core-listMenu-item, li.dynamic, and ul.dynamic…and so far none of these seem to be respecting the style properties.
I use Internet Explorer (IE) and the F12 developer tools to debug my styling. You can use the tools to see what styles are applying and tweak them in real time. Check to see if your styles are being overridden by another CSS file or setting. With the IE developer tools you can untick CSS settings so that they don’t apply and see the result in real time.
Thanks for this. We upgraded from SP 2007 (via 2010) and have this issue. I’ll try it out tomorrow but I think it should work just fine.
I’m noticing in on my own styling that the Folder Headers don’t seem to like taking styled fonts … is there are way to get folder header fonts to look the same like my styling which are successfully applied to Sites and default links that go to my Global Navigation bar?
Hi,
I just wanted to ask which CSS file needs to be updated to make this change.
Thank you.
You need to add this code to your custom CSS file. You use this file to override the default CSS within SharePoint. You configure SharePoint to use the custom CSS from Site Settings -> Look and Feel -> Master page. Expand Alternate CSS URL and select “Specify a CSS file to be used by this site and all sites that inherit from it.”
Richard, after this fix, did you have problems with the arrow alignment for items with children?
I’d like them to align to the right – any idea?
I haven’t had any problems with the arrows. They automatically appeared on to the right of the list item text. Maybe check to see if any other CSS is affecting your layout.
thx for the reply, Richard. I meant that in SP2010 the arrows where aligned to the rightmost edge of the container. In SP2013, there’s just a margin between the menu item string and the arrow, resulting in a quite cluttered look where each arrow is in a different position…
On my environment I’ve set a padding-right value of 10px on .ms-core-listMenu-horizontalBox .dynamic .dynamic-children.additional-background
Hope this helps.
Hello I need to o the same have you figured out how to do it.
hello have you solved the problem of aligning the arrows please provide me with it if possible
Hi Richard,
How could i use the code for multiple parent menu items. Each item needs to have a different color.
Regards,
Ren.
It works !! Thanks for the article, Richard.
Do you know what is the CSS code to add a line separator between the drop-down values? Thanks.
Try adding styles for li.dynamic and li.dynamic-children. That worked for me.
li.dynamic:hover,li.dynamic-children:hover {border-bottom:1px solid #0060A0; }
Pingback: Styling the Global Navigation Bar – luminescence