+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Responsive Design - Navigation

Responsive Design - Navigation

4 posts, 0 answered
  1. David Rhodes
    David Rhodes avatar
    42 posts
    Registered:
    24 May 2005
    14 Nov 2013
    Link to this post
    Hi,
    Does anyone know how to accomplish the responsive design like this Sitefinity template?

    http://centinyx.tornadoapplications.com/

    The Sitefinity options for transforming navigation are limited to dropdown and 'toggle vertical'
  2. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    15 Nov 2013 in reply to David Rhodes
    Link to this post
    This is done purely with CSS & Javascript.  For the full width view the <li> and set to display:inline-block; and the Mobile view the are set to display:block; and the <ul> is show or hide based on clicking the menu <div>
  3. David Rhodes
    David Rhodes avatar
    42 posts
    Registered:
    24 May 2005
    15 Nov 2013
    Link to this post
    I see, does it need Javascript then? Surely it could be done via CSS only using @media in the CSS file eg:
    @media only screen and (max-width: ??px) {}
  4. Jonathan
    Jonathan avatar
    119 posts
    Registered:
    19 Dec 2012
    15 Nov 2013 in reply to David Rhodes
    Link to this post
    The media query is correct and is where you would make the style changes from an inline menu to a vertical menu.  JavaScript will be needed to achieve the menu opening and closing in the mobile and desktop view.
4 posts, 0 answered