2

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?

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

  • 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
3

I found this tutorial and looks like it is quite possible. http://kogzee.wordpress.com/2013/08/07/style-sharepoint-2013-top-navigation-global-navigation-menu/

EDIT
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:

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

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

HTML

<!--Menu-->
   <div id="navigation" class="crom-Navigation">
   <ul>
      <li><a href="#">Cameras</a>
         <ul>
            <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>
         </ul>
      </li>
      <li><a href="#">Computers</a>
         <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Netbooks</a></li>
            <li><a href="#">Tablets</a></li>
         </ul>
      </li>
      <li><a href="#">Media</a>
         <ul>
            <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>
         </ul>
      </li>
   </ul>
</div>

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

Call that custom CSS in your master page

<SharePoint:CssRegistration
  name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/CromwellFixedWidth/CromwellFixedWidthStyle.css %&gt;"
  runat="server"
  after="SharepointCssFile"/>

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

<!--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">
        <Template_Controls>
            <asp:SiteMapDataSource
                ShowStartingNode="False"
                SiteMapProvider="SPNavigationProvider"
                id="topSiteMap"
                runat="server"
                StartingNodeUrl="sid:1002"/>
        </Template_Controls>
    </SharePoint:DelegateControl>
    <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
        <SharePoint:AspMenu
            runat="server" UseSeparateCss="false"
            AdjustForShowStartingNode="False" StaticDisplayLevels="2"
            AccessKey="1" SkipLinkText="" EnableViewState="False"
            MaximumDynamicDisplayLevels="1" 
            DataSourceID="topSiteMap" Orientation="Horizontal"
            RenderingMode="List"
            UseSimpleRendering="False"
            ID="TopNavigationMenu">
            </SharePoint:AspMenu>
    </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div>
  • Please add more information than a link to explain how this is solvable :) If the link breaks, your answer will be of no help to future readers – Robert Lindgren Dec 5 '13 at 11:41
0

You need to set following properties to provide custom CSS to Menu Item otherwise they won’t be picked up by SharePoint ASP Menu Control

  1. UseSimpleRendering = False

  2. RenderingMode = List

reference Link

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.