SharePoint 2013 Global Navigation Styling CSS

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.

SP2103TopNavCSS1

SP2103TopNavCSS2 SP2103TopNavCSS3 SP2103TopNavCSS4

 

By default SharePoint wraps the menu item text, producing a result as below.

TopNavWrap1

 

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.

TopNavWrap2

 

This is the result.

TopNavWrap3

Advertisements

17 thoughts on “SharePoint 2013 Global Navigation Styling CSS

  1. Eric Culver

    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!

    Reply
    1. richardstk Post author

      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).

      Reply
      1. Eric Culver

        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.

      2. richardstk Post author

        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.

  2. Deafwing

    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?

    Reply
    1. richardstk Post author

      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.”

      Reply
  3. wmnpc

    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?

    Reply
    1. richardstk Post author

      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.

      Reply
  4. wmnpc

    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…

    Reply
    1. richardstk Post author

      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.

      Reply
  5. Ren Lyke

    Hi Richard,

    How could i use the code for multiple parent menu items. Each item needs to have a different color.

    Regards,
    Ren.

    Reply
  6. Ricky

    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.

    Reply
  7. Eric Culver

    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; }

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s