Wednesday, January 29, 2014

SharePoint 2013 Global navigation: Wrap the menu items

In the master page, there needs to be three things added and one setting modified.  Then you'll have to add to your custom css file (this part is optional but after you see the menu, you'll want to add this).

The items to add to your master file in the SharePoint:AspMenu are:
ItemWrap="true"
RenderingMode="List"
cssClass="mycss-aspmenuclass"

The item to change in the master page setting UseSimpleRendering to false.

this is that it looks like out of the box:

------------------------------------------------------------
<SharePoint:AspMenu
   ID="TopNavigationMenu"
   Runat="server"
   EnableViewState="false"
   DataSourceID="topSiteMap"
   AccessKey="<%$Resources:wss,navigation_accesskey%>"
   UseSimpleRendering="true"
   UseSeparateCss="false"
   Orientation="Horizontal"
   StaticDisplayLevels="2"
   AdjustForShowStartingNode="true"
   MaximumDynamicDisplayLevels="2"
   SkipLinkText="" />
------------------------------------------------------------

this is what it should look like after your changes.
-------------------------------------------------------------
<SharePoint:AspMenu
   ID="TopNavigationMenu"
   Runat="server"
   EnableViewState="false"
   DataSourceID="topSiteMap"
   AccessKey="<%$Resources:wss,navigation_accesskey%>"
   UseSimpleRendering="false"
   UseSeparateCss="false"
   Orientation="Horizontal"
   StaticDisplayLevels="2"
   AdjustForShowStartingNode="true"
   MaximumDynamicDisplayLevels="2"
   SkipLinkText=""
   ItemWrap="true"
   RenderingMode="List"
   cssClass="mycss-aspmenuclass"/>

---------------------------------------------------------------
Now add to your custom css file three items so that there is some space between the menu items.

.mycss-aspmenuclass .level1   
{
 margin-left: 10px;
 margin-right: 20px;
}
.mycss-aspmenuclass .level2
{
 margin-left: 10px;
 margin-right: 20px;
}
.mycss-aspmenuclass .level3
{
 margin-left: 10px;
 margin-right: 20px;
}

 
Posted by at

5 comments:

  1. MattJAugust 1, 2014 at 1:09 AM

    Hi, where should I save the custom css file?

    ReplyDelete
    Replies
    1. DC Sharepoint ConsultantAugust 21, 2014 at 2:26 PM

      You can save it in the style library, then you can set the css in the master page settings or when you apply the master page to the site.

      Delete
  2. UnknownApril 7, 2015 at 8:25 AM

    Hi I tried this method but it didn't work. It appears that the global nav bar just remains at a fixed width. I've reset the master page to the site definition and it still won't adjust. Is there something else that needs to be done? Thanks

    ReplyDelete
    Replies
    1. UnknownApril 7, 2015 at 11:09 AM

      I've figured it out. I forgot to check the master page back in as a major version.

      Delete
  3. HesMarch 26, 2018 at 2:49 AM

    Thank you - was looking for a solution a while now. But it seems my custom css file is not applied. The wrapping looks ugly on the front end. I would like to apply padding so that the menu items is a bit further apart. I did add the custom.css file and referenced it in the masterpage like this:
    But regardless of what I do in the custom.css file, it does not reflect on my front end

    ReplyDelete

Subscribe to: Post Comments (Atom)