Responsive Design - Navigation - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Responsive Design - Navigation

  • Responsive Design - Navigation
  • Hi,
    Does anyone know how to accomplish the responsive design like this Sitefinity template?

    The Sitefinity options for transforming navigation are limited to dropdown and 'toggle vertical'
  • 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)
  • 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>
  • 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.