November 18, 2015 | 28 Feedbacks

Stretchy Navigation

A rounded navigation trigger that stretches on click/tap to reveal the navigation items.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

While surfing some Dribbble shots, we came across this nice shopping list concept by Hila Peleg, which inspired today’s resource. We decided to apply a similar idea to a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add content button and 3) edit content button.


Creating the structure

The HTML structure is pretty basic: a is used to wrap an unordered list (containing the navigation items) and an (for the menu icon).
An additional span.stretchy-nav-bg element is used to create the stretchy background.

Adding style

We created the .cd-stretchy-nav class to define the main style for the stretchy navigation. We then used two additional classes, .add-content and .edit-content, to customise the toolbars for adding and editing content respectively.

The basic idea of the animation is: we assign to the span.stretchy-nav-bg a fixed height and width (the same of the; when the navigation is open, we use the .nav-is-visible class to animate its height (or width, for the .add-content toolbar) to create the stretching effect while revealing the navigation list items.

For the navigation items, we defined 2 different CSS Animations: the scaleIn for the item icons and the slideIn for the item labels; the animation-delay property is then used to animate different children at different moments.

For the toolbars: when the navigation is open we only display the item icons (using the scaleIn animation), while the item labels are shown when hovering over the navigation (using CSS Transitions).
For the editing toolbar, for example, we have:

Events handling

We used jQuery to listen to the click event on the, and add/remove the .nav-is-visible class from the


Jul 15, 2016
  • Bug fixed - content below nav not clickable
Nov 18, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • megapixelstock

    You are doing great!!! Thank you for this awesome navigation.

    • Sebastiano Guerriero

      thanks :)

  • Unai

    Cool. I miss a demo with the button at bottom, and the option list going up, though.

    • Sebastiano Guerriero

      that’s an idea for an update ;)

  • Don Droga

    Could you please add the jQuery code in situ with formatting please? Thanks!

    • Sebastiano Guerriero

      Hey there! you can download the source files (download button -> top right of the page)

  • Nils Torbjörn Butenschön

    If jQuery is used for the sole purpose of toggling a class upon clicking, why not leave it out of this completely? The link could be replaced by a checkbox, which is hidden and a label, which is styled correspondingly. The navigation could then be hidden or shown by ways of the “:checked” selector and the general sibling combinator (~).

    • Sebastiano Guerriero

      interesting. It’s true for the navigation (style 1), and actually I should include a version that doesn’t rely on javascript like we did with the multi-level accordion

      However the 2 other variations require javascript anyway to implement, for example, the upload of an image etc

      tnx for the feedback ;)

  • Sergei Alkodijaus

    I’m in love with all your library, and now also with your course!!!

    Just a question I ask you here because there are no comments section in the course: what version of Sublime Text are you using? Which packages for HTML5 and CSS3?

    Thank you very much and, please, keep on pushing!

    • Sebastiano Guerriero

      Hey Sergei! Glad to hear that :) We’re using Sublime Text 3 with Emmet installed

      • Sergei Alkodijaus

        Nice, thank you!!

  • Brad Adams

    Looks awesome! Similar concept to something I used for the menu on my old site :-)

  • 1111161171159459134

    Great tool! Yet, how can we use Font Awesome icons instead of SVG sprites you’ve used. Can we just insert fa-icons within tags??

  • miyagi

    Cool stuff. I have one problem though, I changed the svg icon with some other. The position and works well but I seem to have lost the control on opacity changes of the svg (hovering). any hints?

    • miyagi

      the icon was just thin apparently :)

  • Jay T

    thanks heaps for this! having a little trouble though when adding more than 5 items to the list. the first 5 labels slide in nicely but anything beyond that are just static.. been playing with the style code for hours but not having any luck!

    • Claudia Romano

      Hi there, if you’re using the navigation, you need to set an animation-delay for the span and a::after elements in you css file (e.g, to the element 6 set an animation delay of .3s, to the element 7 .35s and so on). Hope this helps!

  • ethan

    Thanks for such great plugin, I have a question when I add this into my site I am not able to click anything behind that even in close menu condition. Is anybody has facing such issue or I am getting this?

    • Johann Galati

      Hello, I am facing this same issue, which is really complicated when the site is being displayed in mobile devices. I made a new comment about this.

      • ethan

        Thanks Johann, I made a small change I have update the visibility in css with display but this solution is not working as smooth as the original plugin. Just because of continue getting issue with the plugin we have to change the menu style but still waiting for any good solution so we can use it again.

        • Claudia Romano

          @disqus_g5kgV3evcy:disqus @johanngalati:disqus thanks for the heads-up! Fixed now ;)

  • Will

    When I try to generate a css file from the style.scss file I get ‘Undefined mixin ‘transition’. Am I just being painfully blind?
    Thanks so much for this by the way, love it.

  • Johann Galati

    Hello guys! This is a great plugin but there is an issue which was mentioned by Ethan, 25 days ago.
    You cannot click anything behind the menu, even when its closed.
    Is there a setting to fix this?

  • lgtiamo

    i love it

  • Hilf Mir Bitte

    Has anyone had any luck integrating this navigation into X theme for WordPress?

  • Emily Lin

    Hi, How do you change the icons used under the navigation? Opened the sprite file and tried to modify but it didn’t work.

  • craniel

    3 problems I issue: first of all, I want to add Font Awesome icons via a class, can I do this and will it work? Or do I have to change code? Second, I changed the font and now I have black dots before the section name in the navigation. Third: My active element is not changing on clicking. I appreciate any help. Thanks!

  • Michael Dias

    Hi. Imagine I have so many items in the menu that they cannot be displayed all at once.
    I would then need some scrollbars of some kind.

    How can I do that?
    For testing, simply add more entries to the menu, until you see scrollbars are needed.
    I tried adding overflow-y: auto to the cd-stretchy-nav css, but that didn’t help.
    Anyone have any idea, please?