Try Now
More in this section
Blogs RSS feed

How to disable Sitefinity’s default navigation styling

by Gabe Sumner

Sitefinity includes a navigation widget that is fully aware of your site map and renders all manner of navigation links:

Sitefinity's built-in Navigation Widget

Behind the scenes, this widget is driven by Telerik’s RadControls (TabStrip, Menu, SiteMap, etc.).  This enables the navigation widget to inherit the rich functionality of these controls.  However, it also means this widget inherits RadControls’ default CSS styling.

RadControls are skinnable and there are lots of resources that explore how to create custom skins for RadControls.  These custom skins can then be applied through Sitefinity:

The RadControls Skin setting in Sitefinity's Navigation Widget

However, even when custom Skins are applied RadControls will still load a set of base styles to create basic functionality (drop-down menus, etc.).  These basic styles need overridden through CSS using !important if you want to provide different settings.

Can’t I just turn-off these base RadControls styles?

Being forced to override unneeded CSS styles is, understandably, annoying.  In some circumstances it would be better to simply start from scratch using your own styles.  This is possible, but it currently involves mapping Sitefinity’s navigation widget to an external template.   Here is how it’s done:

Note:  These instructions are for .NET developers and they assume you’re already familiar with Visual Studio and ASP.NET UserControls.

Step 1:  Create an ASP.NET UserControl:

Creating a new ASP.NET UserControl to be the External Widget Template for the Navigation Widget

Step 2:  Paste the following code into this ASP.NET UserControl: 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Navigation.ascx.cs" Inherits="SitefinityWebApp.Custom.Widgets.Templates.Navigation" %> <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %> <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="navcontrols" %> <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server"> <Templates> <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="NavigationMode" Operator="Equal" Right="HorizontalSimple" runat="server"> <navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_horizontalsimple" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" runat="server" Skin="Sitefinity"> </navcontrols:SiteMapNavigationTabStrip> </sf:ConditionalTemplate> <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="NavigationMode" Operator="Equal" Right="HorizontalDropDownMenu" runat="server"> <navcontrols:SiteMapNavigationMenu ID="siteMapControl_horizontaldropdownmenu" runat="server" Skin="Sitefinity" /> </sf:ConditionalTemplate> <sf:ConditionalTemplate ID="ConditionalTemplate3" Left="NavigationMode" Operator="Equal" Right="HorizontalTabs" runat="server"> <navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_horizontaltabs" runat="server" Skin="Sitefinity"> </navcontrols:SiteMapNavigationTabStrip> </sf:ConditionalTemplate> <sf:ConditionalTemplate ID="ConditionalTemplate4" Left="NavigationMode" Operator="Equal" Right="VerticalSimple" runat="server"> <navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_verticalsimple" runat="server" Orientation="VerticalLeft" MaxDataBindDepth="1" Skin="kyky"> </navcontrols:SiteMapNavigationTabStrip> </sf:ConditionalTemplate> <sf:ConditionalTemplate ID="ConditionalTemplate5" Left="NavigationMode" Operator="Equal" Right="SiteMapInColumns" runat="server"> <navcontrols:SitemapNavigationSiteMapControl ID="siteMapControl_sitemapincolumns" runat="server" MaxDataBindDepth="2" Skin="Sitefinity"> <LevelSettings> <telerik:SiteMapLevelSetting Level="0"> <ListLayout RepeatDirection="Vertical" RepeatColumns="10" /> </telerik:SiteMapLevelSetting> </LevelSettings> </navcontrols:SitemapNavigationSiteMapControl> </sf:ConditionalTemplate> <sf:ConditionalTemplate ID="ConditionalTemplate6" Left="NavigationMode" Operator="Equal" Right="SiteMapInRows" runat="server"> <navcontrols:SitemapNavigationSiteMapControl ID="siteMapControl_sitemapinrows" runat="server" MaxDataBindDepth="2" Skin="Sitefinity"> <LevelSettings> <telerik:SiteMapLevelSetting> <ListLayout RepeatColumns="1" AlignRows="true" /> </telerik:SiteMapLevelSetting> <telerik:SiteMapLevelSetting Layout="Flow" SeparatorText="&#x250A;" /> </LevelSettings> </navcontrols:SitemapNavigationSiteMapControl> </sf:ConditionalTemplate> <sf:ConditionalTemplate ID="ConditionalTemplate7" Left="NavigationMode" Operator="Equal" Right="CustomNavigation" runat="server"> <telerik:RadSiteMap ID="siteMapControl_customnavigation" runat="server" Skin="Sitefinity" /> </sf:ConditionalTemplate> <sf:ConditionalTemplate ID="ConditionalTemplate8" Left="NavigationMode" Operator="Equal" Right="VerticalTree" runat="server"> <navcontrols:SiteMapNavigationTreeView runat="server" id="siteMapControl_verticaltree" Skin="Sitefinity"> </navcontrols:SiteMapNavigationTreeView> </sf:ConditionalTemplate> </Templates> </sf:ConditionalTemplateContainer> <script type="text/javascript"> function radMenuOnClick(sender, args) {

        var state = args.get_item().get_attributes().getAttribute("ExpandOnClick");
        args.get_item().get_attributes().setAttribute("ExpandOnClick", "true")

    function radMenuOnOpening(sender, args) {
        var state = args.get_item().get_attributes().getAttribute("ExpandOnClick");
        if (state != "true")
        args.get_item().get_attributes().setAttribute("ExpandOnClick", "false")

This code isn’t as intimidating as it looks.  This is simply a slightly modified version of the default template for the Navigation widget.  (This code could also be found in the Sitefinity SDK.)  Sitefinity’s Navigation widget needs to handle multiple scenarios (horizontal, horizontal with dropdown, vertical, etc.).  What you’re seeing in this code are server tags that correspond to these various scenarios.

Step 3:  Add “EnableEmbeddedBaseStylesheet” and “EnableEmbeddedSkins” to disable the automatically embedded skins and base stylesheet.

Disabling Embedded (Default) styling for Sitefinity Navigation

In the example above I’ve added these properties to the “siteMapControl_horizontalsimple” tag.  This disables embedded styling for the horizontal navigation scenario.  These properties can be moved to another tag (or multiple tags) to disable styling elsewhere.

Step 4:  Configure the Sitefinity Navigation Widget to use this custom Template:

Specifying an external template for the Sitefinity Navigation Widget

Step 5:  Create your own custom CSS styling. 

At this point, you’re on your own.  Sitefinity will render this navigation with zero styling.  It will be up to you to create CSS styling that makes it look how you want it to look.

More resources

The solution above shows how to map a Sitefinity widget to an external template.  It’s worth noting that this technique can be used for all of Sitefinity’s widgets.  If you’re interested in learning more about this topic, then check-out Josh Morales’ posts on this topic:


Leave a comment
  1. Jacques Jan 19, 2012
    Hi Gabe,

    I tried exactly what you said here, copying your code and all. Only thing I had to remove was the inherits attribute from the page directive.

    What rendered out when I applied it was certainly different, but when I look at the CSS in Firebug, there's still a lot of RadTabStrip, rtsLevel1, etc. being applied.

    The mapping definitely worked, because I added some garbage text into the mapped control and it showed up on the page.

  2. Jacques Jan 19, 2012
    Hello again Gabe,

    I've actually tried this in a number of ways now and it just won't work. I confirmed that it's definitely mapped correctly, but the page is still rendering the embedded CSS resource files which is then overriding my styles.

    Any idea what's causing this?
  3. Jacques Jan 19, 2012
    Hello again Gabe,

    I've actually tried this in a number of ways now and it just won't work. I confirmed that it's definitely mapped correctly, but the page is still rendering the embedded CSS resource files which is then overriding my styles.

    Any idea what's causing this?
  4. aravind Mar 30, 2012
    may be you did't put   EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false"

  5. Cory Apr 05, 2012
    I'm having the same issue. It applies something that appears unstyled, but the source still has lot's of junk in it (rtsLI, 3 times span tags, etc). Was a solution ever found/posted?
  6. Josh May 17, 2012
    Cory, keep in mind that disabling the stylesheets will only prevent the embedded Telerik CSS from loading. the rendered source of the menu control itself is fixed; this is by design for the RadMenu control.
  7. Jacques Mar 19, 2013
    Hi Josh,

    You said in your comment that "...will only prevent the embedded.. from loading". That doesn't seem to be entirely correct. I've followed these instruction and successfully mapped to my widget template for the navigation control. It correctly renders a menu with zero styling. But, if I think go to the navigation control in Sitefinity's backend and add a CSSClass (Skin) called MetroTouch, it renders with some styling. I checked and this is Sitefinity still adding the CSS to the combined CSS file http://mysite.com/Telerik.Web.UI.WebResource.axd?compress=0&_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%2c+Version%3d5.4.4010.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen%3a6264c692-5b24-4cea-... etc.

    I could just provide a custom skin name, but the reality is that we're still sending unnecessary CSS down to the client. The fact that it picked up a particular skin is concerning, because it looks like Sitefinity is combining all of the CSS for all of the skins.

    Leave a comment