Using SlickNav with SharePoint

Responsive design in the word of the day, and recently full responsiveness has become more and more required in intranets too, and not only in Internet sites. This led me to trying out the SlickNav with a SharePoint site of a customer, and was happily surprised, when everything mostly went in a truly slick manner! Anyone working with SharePoint will, however know, that slick with SharePoint has a whole different meaning than slick in a simple HTML+CSS web site. So a few notes from my journey with SlickNav.

• For basic implementation it really is enough to download the SlickNav package from the web site, and follow the general instructions of usage.
• Include the jquery.slicknav.js and slicknav.css files in your project, as instructed.
• Remember to refer jQuery in your MasterPage along with the SlickNav files.
• As for SharePoint, if using the OOB menus, there obviously is no ul with the id of "menu"; instead you can use "div.ms-core-listMenu-horizontalBox > ul.root" for the element selector and it works like a dream.
• Remember to set the prependTo property for the initializing function, e.g.
  prependTo: '#mainnav'
• I also found it useful to set the allowParentLinks property to 'true', so users can clikc on the parent links in a similar way as the regular SharePoint navigation
• If you are using dynamic nodes in SharePoint navigation, you need to set the styles for
  .slicknav_open ul.dynamic {
     top:0;
     left:0; }
  in order to show the dynamic navigation; otherwise it is still hidden somewhere at left:9999px etc.
• The dropdown tends to fall behind the page content, so set the styles for
  .slicknav_nav, .slicknav_nav ul {
      position: relative;
      z-index: 100; }
• A varying amount of other css tweaking is needed to make it neat in SharePoint.

Still, I wouldn't say it was a really big issue to get the SlickNav up and working and even stylized nicely for the customer.