More in this section
Blogs RSS feed

Creating Responsive Sitefinity Navigation

by User Not Found
Web analysts and experts have already overloaded us with statistics showing that worldwide by 2014, mobile devices will dominate over desktops and laptops in terms of usage for accessing websites. That pushes web administrators worldwide to create their mobile strategy and make their websites partially or fully mobile friendly. Sitefinity shines here, as its built-in responsive design capabilities and mobile app builder together address all major concerns and approaches for supporting mobile devices with minimum amount of effort.

One of the most important elements when designing a website to be mobile friendly is of course, the navigation. A common complication with the navigation menu turns out to be the different intended behaviors. For instance,  you might want to have a dropdown menu with one or more sublevels available

Sitefinity Dropdown nav

While on a mobile device, the navigation should be easily usable via the touchscreen, so you might want to have something like this:

Sitefinity Responsive navigation in iPhone

Or even like this:

Sitefinity Responsive navigation in Android

Is it possible? Definitely! Is there a one-size-fits-all kind of solution? Hardly. There are different cases we need to consider: what’s your original navigation like? Is it a flat, single level tabstrip?

Sitefinity TabStrip Navigation

Or is it a dropdown or even a mega menu?

Sitefinity MegaMenu

These are all separate scenarios that require a different approach. We’ll revise them all.
 Let’s start with the more simplistic one, like a single level menu. In this example, we’ll address the built-in navigation widget in Sitefinity and using the “horizontal” behavior:

Sitefinity Navigation Widget Options

The markup looks something like this:

Sitefinity Navigation Widget Markup

As you can see, the generated output is a standard unordered list (ul) with each option in the menu being another list item (li). Remember that all CSS skin file selectors that are embedded in the control are fully documented, and you can create your CSS to control the appearance of each element.  We have done this to design the menu like we see on the screenshot above.
Now, if we need to have different behavior on mobile devices, the easiest and cleanest thing we could do is use a CSS media query, which would specify different CSS styling when the website is viewed on a smaller screen. For example, we could have our menu become something like this:

Sitefinity Responsive Navigation

whenever viewed on a screen, that’s less than 640 px in width. It’s a matter of a few lines of CSS:

@media screen and (max-width: 640px) {

.RadTabStrip_Zenlike li {

             width: 100%;

             border-top: groove 2px;

             border-bottom-color: #767676;


.RadTabStrip_Zenlike .rtsLevel .rtsUL li.rtsLI .rtsLink .rtsOut .rtsIn {

            padding-left: 10px;

            text-align: left;

            display: block;



For these of you, eager to see the full Sitefinity template with the theme’s CSS – the link to it is at the bottom of this page.

Let’s take a look at what happens here: using a media query, we detect whenever the screen size is 640 px. or less in width. If the condition is met, we set the list items in our unordered list to be displayed as a block, so they appear  one per row. Also, we force them to fill up 100% of the width of the containing block (the width: 100%; property.) That would set each menu item to be easily accessible by touching anywhere on the row it’s on. 

Simple, neat and no duplicate content - just restyling.

Something similar is possible in cases, when you have a dropdown or mega menu - check out the menu on and see how you can toggle it. It’s again a matter of creating the CSS. There are lots of samples for similar styling across the web.

If togglable menus are not the preferred solution for the mobile version of your page, or if restyling your dropdown/mega menu is too much, there is another approach. Simply have two navigation widgets, of which only one would be visible at a time. How? Easy – simply put each widget into a container and change the “display” settings for them when viewed in large or small screen:

  @media screen and (max-width: 640px) {

div.MegaMenu {

div.MobileMenu {



Hottest trends lately, however, suggest using native interface representation, that’s typical for mobile devices. “Select” dropdown lists are a great example – if we can convert a menu to a <select> dropdown list, we will have a native user interface on iOS and Android, that will represent our information in an even more user-friendly and sleek way.

Sitefinity  Navigation in a Select Dropdown

Here’s How:
First, we start off by adding our <select> dropdown list to our template. Again, using the hide/display option using display:none; settings and media queries, we toggle the visibility of our main menu and the select dropdown.

But wait, does that mean that we have to manually manage that dropdown and populate it with options every time we add or remove pages? Not necessarily – with a simple Javascript we can dynamically generate the <select> list from our original navigation. Chris Coyier from CSS Tricks has a neat sample for this.

One thing that I still haven’t found a definitive answer for is this: do the hidden navigation menus and their anchors affect SEO somehow? I’ve consulted with SEO experts and the answer I’ve received so far is the same – no one can tell for sure, as search engine algorithms are kept in secret. Common belief is that user experience is more important.

What do you think?


Leave a comment
  1. Steve Apr 23, 2013
    I'm a huge fan of <select> navigation on'd be really great if you made that a default option in one of your mobile stories.  Enable a property and it'll generate is the nav menu in <select> form

    Sure jquery can do it to, but modifying the dom is an expensive operation when you have other things going too...and you guys know the sitemap nodes ALREADY on databound in the backend...why not just render it out for us? :)
  2. Grisha 'Greg' Karanikolov Apr 23, 2013
    Good suggestion, Steve - I'm passing it on to our devs for consideration.
    One thing that would be useful as a feedback, though, would be the logic. It's clear, when you have a simple flat 1 level menu. What should happen when you have more sublevels, though?
  3. Shane May 30, 2013
    I'm a UX/interaction designer, not a Sitefinity dev at all, but I have to weigh in here and say using select for navigation is something you want to avoid as a design decision - user acceptance is poor, navigation speed is reduced, and accessibility/screen readers suffers, especially if Javascript is turned off. There are some references/articles about this on Smashing and UX Matters, amongst others. I've also seen this a couple of times with my own clients.
  4. Grisha 'Greg' Karanikolov Jun 03, 2013
    Hi Shane,
    Thank you for the information! Could you please pass on some links to these articles for a reference?
    The idea here is that standard navigation menu, which can be set up in accordance to all accessibility standards would be converted into a <select> menu on smaller devices, like smartphones, etc. Would that affect screen readers? Not being an expert in this myself, this would be useful info for me and I believe for other folks that follow this post.
    My personal impression is that it's easier to use "native" interfaces that the smartphones (or at least my android device)  provide - dropdowns, checkboxes or radio button lists. But I might be an exception from the general rule, so any further info on that topic would be great! Thanks!
  5. Buckwheat Nov 15, 2014
    Great example of spam on Sitefinity blog.  As you can see, Sitefinity is horrible at catching spam in their blogs.
  6. Buckwheat Nov 15, 2014
    Great example of spam on Sitefinity blog.  As you can see, Sitefinity is horrible at catching spam in their blogs.
  7. Buckwheat44 Nov 15, 2014
    Great example of spam on Sitefinity blog.  As you can see, Sitefinity is horrible at catching spam in their blogs.

    Leave a comment