Adding a vertical fixed navigation

Permalink
Greetings,

I am new to C5 and have to say I absolutely LOVE it.

I am using 5.7.5.3 with Cloneamental. I am not a coder but I am learning with C5. I would like to add in this vertical fixed navigation I found athttps://codyhouse.co/demo/vertical-fixed-navigation-2/index.html.... Can anyone point me toward a starting point with this? Thanks!

 
Kurtopsy replied on at Permalink Reply
Kurtopsy
Hi kay9medic,

Your link seems to have a '.' at the end of html, so it throws a 404. The easiest way to replicate this is to use Chrome developer tools (Option + Command + I) or Firebug within Firefox. Inspect the elements and simply copy the html structure and go through and copy the css assigned to each element.

Hope that helps
kay9medic replied on at Permalink Reply 1 Attachment
Thank you Kurtopsy. I'm afraid I'm not explaining myself very well.

The folks who put this vertical nav together packaged the javascript and css together and made it available for download. The demo is athttps://codyhouse.co/demo/vertical-fixed-navigation-2/index.html...

A screenshot of the extracted dir is attached.

I think I know how to register the js and the css as an asset, following the tutorials and deconstructing the Simple Back To Top addon for clues, but I don't know what to do next. Or if I'm approaching this in the right way.
Kurtopsy replied on at Permalink Reply
Kurtopsy
Ok, I got it now. Copy/paste the css in your stylesheet or in the Custom Styles area, create a js file if you don't have one, and link that in the <head>. All your missing is the html. Add the html with the proper classes and id's and you should be good to go. I don't think reverse engineering a block will help much in this case, unless your trying to make it into a block. Personally, I would hard code it and get it to work; and then build it into a block.
blinkdesign replied on at Permalink Reply
blinkdesign
you could use a standard bootstrap class "affix" on your navigation block.
more information on how to use it see:
http://getbootstrap.com/javascript/#affix...