posts - 16 , comments - 4 , trackbacks - 0

Friday, July 10, 2015

Style SharePoint 2013 Top Navigation (Global Navigation) menu

How much room do I have to change the top navigation in SharePoint?
I have a publishing site and I am using SharePoint's default top navigation which I have modified a little (by applying CSS) but now I want some more changes as below.

Please check if this is possible to do or not?

In my top navigation there are three levels:

Main Link
------Sub link 1
| |
| -----------Sub link a
| |
| -----------Sub link b
------Sub link 2

When you mouse over "Main Link" it opens level 1 which shows "Sub link1" and "Sub link2".
When you mouse over "Sub link 1" then it shows level 2 "Sub link a" and "Sub link b".

I want to show a different style bullet on level 1 and level 2. They are basically images (small icons) which will be displayed in level 1 and level2 with each item. But again the thing is, icon of level 1 is different than icon of level 2.

Is this possible?

I am using custom master page not the ones provided by SharePoint.

shareimprove this question
I have this problem and I got so excited when I see this solution, but I think the master page "HTML file" and "Master file" are associated. how can I change the master file? Thanks in advance. –  user24931 Apr 7 '14 at 9:36

I found this tutorial and looks like it is quite possible.

The above article explains how you can integrate your custom menu with SharePoint in 2 easy steps.
Suppose you have got the CSS and HTML of menu from designer and now as a SharePoint developer you want to integrate it. Here's how CSS and HTML file will look like:

The CSS is pretty large so I am only pasting small portion of it. You can see rest of it on the link above.

.crom-Navigation {
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    margin: 10px 0px; 
    top: 0px; 
    position: relative;
.crom-Navigation a {
    margin: 0px; 
    padding: 0px; 
    border: 0px;
.crom-Navigation ul {
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    font-size: 16px; 
    border-bottom: 2px solid #003f5f;


   <div id="navigation" class="crom-Navigation">
      <li><a href="#">Cameras</a>
            <li><a href="#">Camcorders</a></li>
            <li><a href="#">Digital cameras</a></li>
            <li><a href="#">Disposable cameras</a></li>
            <li><a href="#">Film cameras</a></li>
      <li><a href="#">Computers</a>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Netbooks</a></li>
            <li><a href="#">Tablets</a></li>
      <li><a href="#">Media</a>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">TV shows </a></li>
            <li><a href="#">Video games </a></li>

Now simply do the following steps and the menu will be displayed.

Call that custom CSS in your master page

  name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/CromwellFixedWidth/CromwellFixedWidthStyle.css %&gt;"

Copy/Paste following code in your master page where you want to display menu

   <div id="navigation" class="crom-Navigation">
   <!--Top Menu-->
   <SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
    <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
            runat="server" UseSeparateCss="false"
            AdjustForShowStartingNode="False" StaticDisplayLevels="2"
            AccessKey="1" SkipLinkText="" EnableViewState="False"
            DataSourceID="topSiteMap" Orientation="Horizontal"
shareimprove this answer

Posted On Friday, July 10, 2015 2:13 AM | Comments (1) | Filed Under [ masterpage topmenu global nagivation current navidation ]

Powered by: