vertical fixed navigation
July 14, 2014 | 24 Feedbacks

Vertical Fixed Navigation

A side navigation which allows users to easily browse the page, selecting one of its sections and smoothly scrolling to it. It doesn't necessarily replace the main website navigation, but comes in handy for pages packed with content.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

If your website pages have lots of content, users can have a hard time finding exactly what they are looking for. This vertical navigation provides a complete overview of the page content, reducing browsing time and making navigation easier.
Navigation labels are hidden and shown only on hover in order to make the navigation less distracting while browsing,

Creating the structure

We wrapped our navigation in a <nav> element and created a section for each navigation item. We added a navigation “trigger”  to access navigation on touch devices.

Adding style

We use Modernizr (.touch and .no-touch classes) to detect touch and no-touch devices, and deliver 2 custom navigation experiences. That is why if you resize the browser to test the snippet, you’ll still get the same effect with the dots. But if you test the demo on a touch device, you see this:

vertical fixed navigation mobile preview

On no-touch devices, we hid the navigation “trigger” and set position: fixed to the <nav> element.

As default, we assigned a scale-down transformation to the navigation items (both dots and labels), and scaled them up on hover.

On touch devices, we set a position: fixed for the .cd-nav-trigger and <nav> and  placed them at the bottom right. This way, it should not conflict with an additional navigation, in case your website requires one.

When user clicks on the .cd-nav-trigger element, we give the .open class to the navigation to change its CSS3 scale value from 0 to 1 , with a CSS3 transition to achieve a smooth animation.

Events handling

When user scrolls through the sections, the updateNavigation() function evaluates which section is currently being viewed and assigns the .is-selected class to the corresponding navigation item (based on the data-number attribute of the navigation items).


July 14, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse. You can follow her on Twitter.

  • Patrik Illy

    Keyboard navigation would be great :)

    • Claudia Romano

      Good suggestion! We will update the resource soon ;)

      • Patrik Illy


  • Colin Rotherham

    Perhaps add an event listener during the scroll animation to allow mouse-wheel/touch events to cancel scrolling? For deep pages especially, it allows you to “cancel” the animation without fighting with the browser to go the other way.

    I usually listen out for these:

  • jean-claude

    Groovy Claudia! The color scheme is sublime. Your attention to details second to none. Thank you.

  • Mirko

    First of all, thanks for the great piece of code! But unfortunately, the modernizr and touch stuff doesn’t work on Windows phone 8.1 with IE11.
    I get the same navigation as on the desktop. Any ideas how to remedy this ?

    • Claudia Romano

      Hey Mirko, glad you liked it! Thanks for the heads-up, we’ll fix that. In the meanwhile, you may try using media queries rather than .touch/.no touch classes. (e.g., when viewport is larger than 1170px use the style we have used for no-touch devices; for smaller viewport, instead, use the style we have used for touch devices).

      • Mirko

        Hi Claudia, thanks for the reply. I already did that with media queries, I think I will leave the initial navigation for tablets also.

        Regarding Modernizr, I’ve read that Modernizr.touch has been renamed to Modernizr.touchevents. Didn’t try it, cause I used media queries, but I think that is the reason.

  • tipbuzz

    Hi Thanks for the code but i am having problem adding images as individual background of the sections i tried every posibble methods i know to no avail

    • Claudia Romano

      Hi, did you try using the background-image and background-size: cover; property?

  • Tim Stevenson

    Thanks a lot!

  • Helix

    Great gadget, thanks! Used part of it for similar purposes (chapter navigation on top).
    However, I didn’t understand why you would have to use that data-number.
    I’m not a 100% this would work here (it does in my modified code however), but why not use the id in the jQuery selector to set the class? Basically do this in updateNavigation:

    1) determine current section and its ID (store in currentSection)

    2) remove “is-selected” from all navigation items

    3) add class “is-selected” to navigation like this:

    This should be the whole updateNavigation();
    I realize there are more efficient ways to remove and immediately (re-)add a class…
    Also, I prefer to set “is-selected” on the li-Element, not the a-Element. To do that just add “.parent()” before the .addClass and .removeClass

  • Mirko

    How hard would it be to have the current sections name visible to the left of the dot (not just on hover) while that section is current/active?

    Hope you get what I mean :)

    • Claudia Romano

      Hi Mirko, when a section is active, the corresponding anchor tag has the .is-selected class. So you should add something like :

      Thanks should help!

      • Mirko


  • lokitoki

    i like this a lot. but how could you use the event handler for the navigation dots for the scrollwheel of the mouse too? any suggestions?

  • lokitoki

    While testing the site I figured out that the dots are not shown on my Firefox 34. Any suggestions what this could cause?

  • Mark

    This is really helpful, thx, do u have any suggestions as to how to organise text within each section if it grows large ? Even at just a one-screen size, i think it could quite messy having all the content in the one html page ?

    • Bodhisattva Builder

      scrolling div?

  • Bodhisattva Builder

    When a user scrolls the script should take over and animate to the next slide. screens are always clipped when scrolling.

  • Luke van Zyl

    Love this nav! So helpful. However, after copying and pasting all of the css/html/js into my site from the download files the nav is not styled in Chrome but looks fine in Safari?

  • Rubén Jarrín D.

    I love your work, it may be that the next update or version can animate the top menu as on this website template and replace the responsive menu by menu arrow.


  • Konstantin Ryzhov

    Thanks for sharing your experience! :)

  • Heysabbina

    I have a question i’m new on web development and i want this on my avada theme is that possible ? can someone help me for create this step by step ? please ?