Try Now
More in this section

Forums / Designing & Styling / Responsive navigation using SiteFinity OOTB functionality

Responsive navigation using SiteFinity OOTB functionality

2 posts, 0 answered
  1. Luke
    Luke avatar
    56 posts
    18 Mar 2013
    09 Apr 2013
    Link to this post
    Thanks for your time.

    I'm using SiteFinity 5.2 and the OOTB RadMenu to display a very typical horizontal rollout DHTML navigation menu that is three layers deep.

    I am trying to think of a way to preserve this menu on desktop browsers but when resized smaller have the CSS respond with a scaled-back, display appropriate rendered version of the navigation that includes only the 0-level menu and omits all the children.

    My constraints are the following:

    1.) I don't want to build a completely different version of the site for this, I am looking for a responsive solution I can test in real time without a page reload
    2.) I would prefer not to have duplicate the navigation (once for desktop+ sizes, then again with a simpler version for everything < desktop size) and control their visibility with media queries because that sounds inefficient.

     If possible I want to avoid coding customization because (A.) I'm a CMS user, not a bona fide developer and (B.) future SiteFinity upgrades may affect those customizations (what little ASP.NET work I've been involved has always had that customize->update version->regress->start over motif.)

    To provide an example, Twitter Bootstrap's responsive CSS takes their horizontal nav LI-based menu and stuffs it away for toggle show/hide as block level nav items. This pattern provides a simple solution for me to model my navigation on, I just don't know to pull it off with SiteFinity's nested RadMenu.

    Any suggestions are very much appreciated!
  2. Owain
    Owain avatar
    110 posts
    17 Jan 2012
    16 Apr 2013
    Link to this post
    I'd be interested to find a solution for this as well - looking at rebuilding one of the sites I look after to allow for complete responsive design as we have found more and more people are using mobile devices to access our site. 

2 posts, 0 answered