Change Global Navigation Dynamic Menu Direction

With the introduction of list based navigation in SharePoint 2010, you can control the display of the dynamic (drop down) menus better than before.  A common request is to change the vertical direction of the dynamic menu display (items that appear when you hover over a parent navigation item the drop down menu is activated) to horizontal.  The following CSS style statement will change the Global Navigation (top menu bar) dynamic menus to appear horizontally.

/* ---------- Menu Item direction ---------- */
/* Custom identifier */
ul.dynamic li.dynamic,

/* === SharePoint identifiers === */

/* Anchor wrapped around span that contains the
   span that contains nav text. */
.s4-tn li.dynamic > .menu-item,

/* Anchor wrapped around span that contains the
   span that contains nav text;
   not necessary to affect drop down menus  */
.menu .menu-item,

/* Span that contains span that contains nav text */
.menu .menu-item .additional-background,

/* Span that contains nav text*/
.menu .menu-item .additional-background .menu-item-text  {
    display: inline;
}

For list item customization to change the branding of the dynamic menu items, visit the SharePoint 2010 CSS Chart and search the page for “Unordered List Styles for Dynamic (drop-down/fly-out) Menu”.

http://sharepointexperience.com/csschart/csschart.html

3 thoughts on “Change Global Navigation Dynamic Menu Direction”

  1. Hey thanks! But how would I refer to an image instead that’s in the images folder? I have custom Images I want to use for my menu ( background-image )

    Thanks,
    Nick

    1. For list item customization to change the branding of the dynamic menu items, visit the SharePoint 2010 CSS Chart and search the page for “Unordered List Styles for Dynamic (drop-down/fly-out) Menu”. http://sharepointexperience.com/csschart/csschart.html

      You will create a CSS style statement for the navigation background and then point to your custom image for the background property of that style statement.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.