vertical fixed navigation
July 14, 2014 | 65 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 and Nucleo. 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 ?

  • tal mi

    Hello thank you very much for all the great work,
    there is a weird problem, the menu never change to is-selected class (white dot)

    and how can i make the selected section label visible ?

    thank you very much.

    • Claudia Romano

      Hi, glad you like it! :)
      I just tested it on Chrome (Mac) and it’s working properly! On which browser are you experiencing this issue? Thanks

  • mathew beadle

    Hi, as per some comments below, i am using a wordpress theme (ibuki) and don’t have much web/ coding skills. I am not wanting to customise really just need step by step of where to put the files and code. My theme has a section for adding custom css and custom js. Many thanks really great website very helpful.

  • Wira Andhika

    hi, this is amazing ! anyway,actually i was wondering if i could use this technique only for slideshow on top section like image slider ,not for sliding the whole page

    anyone have idea how to do that?

  • Miguel G

    Hi there

    Thank you for an amazing script.
    Is there a way to add an offset of 100px or so to a section when it is scrolled to?

    Thanks so much :)

    • Claudia Romano

      Hi Miguel, glad you like it! :)
      In the smoothScroll, try adding your offset to target.offset().top value. That should do it!

      • Miguel G

        Hi Claudia
        Thanks for getting back to me.

        I tried different variations:

        But it just does not work. Perhaps I am doing it work?

        Would you mind helping a bit more?

        Thanks so much.

        • Claudia Romano

          Try this:
          {‘scrollTop':target.offset().top + 200}

          • Miguel G

            That works perfectly! Thank you so much! You are the best!

            Hugs :)

  • BradMarston


    This is really great stuff. One suggestion would be to have scss and css files that only style the nav and not the rest of the site. The site I am using it on has a rather complex structure where all the content on the homepage are pulled from other pages via partial template.

    It took me a while to re-write the scss for the nav.

    • Sebastiano Guerriero

      hi Brad! Glad you like this ;) Sometimes it’s necessary to include some additional styling. For example in this resource we had to set a min-height for each section for the navigation to work properly. It could be straightforward for some users, not so straightforward for front end beginners.

    • Brad Adams

      Yeah I know what you mean, I’ve used a couple of snippets from CodyHouse and sometimes it can take a short while to extract the actually styling/js you really need for your project.

      But hey, they’re giving away these *awesome* resources for free, I think we should at least be able to work with the originally supplied code in-order to use it.

  • clinton

    i tried to add this code to my but this is what happens to the dots :( can you tell me what’s wrong?

    • Sebastiano Guerriero

      Hi there! this is really odd, since the dot elements shouldn’t have any clone, can you make sure the structure of the unordered list containing the navigation is like the following:

      • clinton

        Yeah that’s how i’ve got it, really strange. Is there any way to just remove the white dots? Which part of the code lines up the white with the red? Thank you for your help

        • Claudia Romano

          Hi Clinton, did you include the reset.css file too? if you didn’t, try adding the following to your style.css file:

  • Avvist

    I love your work. Very elegant and easy to work with! A quick question. I’d like to hide the navigation on a specific section. I tried something like this;

    section#section2:hover + #cd-vertical-nav {
    display: none !important;

    Naturally, this did not work – even though I really hoped it would. :)

    Any suggestions?

    Thank you so much!


    • Claudia Romano

      You may try assigning a higher z-index to that section. E.g.

      Hope this helps!

      • Avvist

        Ah, yes!
        So simple, yet so impossible for me to figure out on my own.
        Thank you so much!


      • Avvist

        This worked perfectly! Thank you so much! :)


  • jp24s

    This is really great, thank you!

    I’ve made some minor modifications and am using it, however whenever I go full screen, the cd-dot moves down to the next item. Working in a resizable window, whenever you click a ‘chapter’ icon, it changes to white and acts normally. Any ideas why this might be happening?


  • Nick

    Hi Claudia,
    This is an amazing piece of work. Quick question…

    What would I need to change if I wanted the sections to just be as tall as the content and not have things absolute positioned? I am trying to do one of those first section is 100% height but the rest are as tall as the content type of site designs.

    • Claudia Romano

      Hi Nick, glad you like it!
      Try removing the min-height: 100% assigned to the .cd-section.

  • Romario S.

    Hi Claudia, this is really brilliant navigation. I’ve been using

    Speaking of which, which section should we customize if we want each dot to show different background images or colors when they’re selected/active? Is it possible to work that way?

    Thanks again!

    • Claudia Romano

      Hi Romario, glad you like it!
      The .cd-selected class is added to the anchor tag (which contains the when it is selected! So You should try adding the background color to the .cd-selected .cd-dot element. Hope this helps!

      • Romario S.

        Hi Claudia, thanks for your guidance. It helps.
        Basically adding “ul li:nth-child(x)” after no-touch #cd-vertical-nav works!

  • zuhloobie

    I really like this, thank you. Question – I have a 60px offset. It recognizes my offset on dot click, but as far as updateNavigation via scroll, it’s not accurate. How do you accommodate for offset on scroll? Might be worth mentioning that I am not using 100% height for anything. I want the updateNavigation to update when a section is at the top of the viewport under my 60px offset.

    • Claudia Romano

      Hi, glad to hear that.
      In the smoothScroll function you should try replacing {‘scrollTop':target.offset().top} with {‘scrollTop':target.offset().top + 60}.
      That should do it!

      • zuhloobie

        Thank you so much for replying :) I was worried you wouldn’t since this is over a year old and I know you (probably) have better things to do. So thank you. I have that part working (“- 60″ works for me). My problem is the “function updateNavigation() {” part where the dots light up depending on what section you are in. A) I don’t have 100% high sections (or body/html) so it needs to know when a section is at the top to activate the highlighted dot, and B) take into account the 60px offset so it is accurate. Ideas?

  • guimenegussi

    I am unable to make the menu appear on the left and the right text ..

    • Santhieran Deacon Munsamy

      on “.no-touch #cd-vertical-nav” change “right: 40″ to “left: 40″


      .no-touch #cd-vertical-nav a span

      float: left

    • Santhieran Deacon Munsamy

      on “.no-touch #cd-vertical-nav” change “right: 40″ to “left: 40″


      .no-touch #cd-vertical-nav a span

      float: left

  • Santhieran Deacon Munsamy

    Great work again guys…Thank you. Question. Im trying to get each section to animate on scroll. i assume that this “$(‘.cd-scroll-down’).on(‘scroll’, function(event){
    });” would do it. Please advise. Thanks

  • Brad Adams

    Hey Claudia, another awesome post. This is quite an old one now so not much hope on a reply, but a question I’ve seen a bunch of times through out the comments;

    What’s “the fix” for non-full-height containers? I’ve tried changing the parameters of the “if” for adding the selected class, but cannot achieve the correct results. Any ideas?


    • Claudia Romano

      Hi Brad, it should work anyway. What kind of issue are you experiencing?

  • Alston Chapman

    Hello Claudia, quick question, I need a link to go to an external site, something in the javascript is preventing this from happening. The browser notices that it’s a link and shows the link address from the tag, but it won’t actually follow the link…?

    Is this an easy fix?

    • Alston Chapman

      Figured out a fix, I used the javascript onClick and called a function that opened that url in a new tab, it was a link to an Instagram account.

  • Aymará

    Hi!! i’m a bit lost here… i’ve managed to make dot navigation work just great. But I can’t make work touch navigation. Toggle appears, but on click it doesn’t do anything. Any idea on what i’m missing?

  • Rocco Franzé

    Hi Claudia, first of all thanks for the awesome work you did here.
    I would like to use it for the company I work, now I have a problem.
    I use for every section a different background image and I would like to display the image for mobile devices, but I can’t figure out how to do it. Could you or someone in here help me?

    Tahnks again and have a nice day.


  • Sevenitude

    Great clear and simple to understand, thank you