smart fixed navigation
July 4, 2014 | 103 Feedbacks

Smart Fixed Navigation

A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It's smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Web pages with a lot of content require a quick way for the user to get back to the top, where the navigation is (most of the time). Hence the old back-to-top button. But why should the user scroll back to the top, if we can make the navigation accessible at any time right where the back-to-top button is supposed to be? No reason in 90% of the cases. For the remaining 10% we are still covered, since we created both a fixed header nugget and the back-to-top snippet ;)

Our pal Gabriele Mellera put together this animation to quickly show you the idea behind this resource:

new back to top animation

Creating the structure

The structure is straightforward: the navigation and its “trigger” are inside the same #cd-nav div. The <span> inside the .cd-nav-trigger anchor tag will be used to create the menu icon with CSS only.

Adding style

Since we coded this nugget starting from mobile, we set a position: fixed for the unordered list inside the navigation #cd-nav. We want it to be at the bottom right for touch devices, super easy to access even if you’re holding the phone with one hand. When the user taps on the trigger .cd-nav-trigger we give the class .is-visible to the unordered list, that changes the CSS3 Scale value from 0 to 1 – with a CSS3 transition to smooth the transformation.

When the viewport is larger than 1170px, we change the navigation position from Fixed to Absolute and we move it to the top. As the user scrolls down, we use jQuery to add the class .is-fixed to the #cd-nav, thus moving the entire navigation back to the bottom right – same effect as on touch devices.

Events Handling

We defined the offset variable to toggle the .is-fixed class from the #cd-nav.

The function checkMenu() takes care of the main navigation behaviour while scrolling:


July 4, 2014
  • 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.

  • Marco Grimladi

    There is a bug when you resize the browser

    • Sebastiano Guerriero

      Hey Marco, can you provide more info about the bug? Everything seems smooth on my side

      • Marco Grimladi

        1. scroll
        2. open menu
        3. resize until phone size
        4. scroll to the top
        5. close menu
        6. resize desktop
        7. click the menu and the menu is disappear

        • Sebastiano Guerriero

          I see. We’ll fix it, even though this won’t bother the average user, who’s gonna experience the page without “playing” with the browser (we – web designers – do that all the time ;))

          • Marco Grimladi

            :D of course :D

  • Damien du Toit

    Nice idea and worth experimenting with! I noticed there’s a small scroll area in which the header navigation is out of the viewport but the fixed navigation hasn’t activated yet; should be a quick fix.

    And my first instinct would be to move the fixed navigation to one of the top corners, though I suspect this might conflict with other page elements.

    • Sebastiano Guerriero

      Hi Damien, in same cases it could be a good idea. The snippet is super easy to customize, in case you want to move the button on top

    • Josh

      I agree. It’s a really simple solution, and I like this idea. But I’d keep it as close to the original nav menu’s position as possible. By doing that, the user doesn’t have to switch to an entirely different screen quadrant for navigation simply because they scrolled a little.

      For UX, ensuring it remains in an immediately familiar spot is key – especially since it’s a new implementation that might not be understood at first glance.

  • Alex Puschinsky

    Neat! Say, what tool did you use to create the old/new animation?

    • Sebastiano Guerriero

      After Effects

  • Daniel Wiklund

    In my opinion, this from a UX point is totally horrible.
    First; placing the navigation in the lover right corner it a very unusual position. It took me about 5 seconds before I saw the little box in the corner.
    Second; why would you hide a such a simple navigation on a (desktop) site where the is clearly enough room, why add that extra click when it is not necessary
    Third; This approach could work on an smartphone, but i don’t really see the advantage in this and the normal off canvas navigation.

    That said, it is very nicely executed with animations and all, but i would never use it on a production site – to me this is just different for the sake of being different

    • Sebastiano Guerriero

      I haven’t tried this UX solution on a real project yet, haven’t run any test so I have no proof that this is something users can benefit from. I think this could be a smart approach though, basing my thought on intuition – same basis you’re using to define this a bad UX solution.

      About the position/size/execution in general, we use just 3 media queries for our resources (we try to keep the code clean), hence the result on desktop can be improved by adding more “break-points”.

      • Daniel Wiklund

        I get your point, and replacing the “scroll to top” button with a button that actually shows the menu without scrolling is a good idea, but I don’t see why you, on a large screen version, wouldn’t just keep the navigation/header fixed – there is more en enough room for it. And on a small screen version I can’t see where this approach should be better then a “normal” off canvas navigation – Ok having just a button instead of a fixed header doesn’t take as much screen space but, i would argue that a normal off canvas navigation is more flexible.

        @Thailak Rao – you are right that to all new design patterns there is a learning curve, but since I don’t think this is “smarter” then any exiting design patterns I can’t see why the user should be bothered whit this learning curve.

    • Thilak Rao

      But it does not replace existing header, merely supplements the existing header navigation and assists users for speed things up.

      I agree, there is a bit of a learning curve, but almost all new design patterns do.

  • Johan Adda

    You forgot the context of a bottom page. Look this web site, for example. Usually you have social icons, next article to read, etc. A busy bottom page. Your demo works only because you designed a dark non content page with a bright button. On a real website, the menu icon will be killed by many interface’s debris.
    It’s not an UX solution. It’s a coded demo.
    A UX solution would have been on a real website, with feedback, a before/after wrap up…

    • Sebastiano Guerriero

      Hey Johan, of course 1) this can’t be a solution for each website – in particular for websites with a lot of content – and 2) it can’t work for all pages of the same website. Just like a standard back-to-top button.

      Besides the button style can be modified to match the project style. On this demo it helps to have a white button on a dark background, but there are infinite other color combinations that will allow your users to easily interact with the button.

      About the demo, I have to keep things simple here: imagine if I create a realistic page, users won’t even know what is the focus of the snippet.

  • Jake Taylor

    Although it does go against user familiarity these days, I think starting to move frequently used navigations to the bottom of the viewport is a great idea. With mobile growing like it is, tapping on links at the bottom is a shorter trip for your finger and reachable for one handed use. Since its a temporary overlay i don’t think covering up content is a problem, especially since its user initiated. I think there’s really good thinking here, nice work!

  • Michael Smith

    I think a “Back to Top” option still needs to be part of this smaller navigation because sometimes people want to go back to the top to see content, not just the menu.

    • Joe Taylor

      Any evidence behind this?

      • Michael Smith

        I mean, it’s just anecdotal. I haven’t done any studies. But I would wager what’s in my wallet that this is true.

        • Joe Taylor

          I was just wondering as I don’t generally do it, the only content you’ll get to from the ‘Back to top’ link generally is going to be the title and first couple of sentences, not a very precise navigation method.

          • Michael Smith

            Valid, but less wear and tear on the thumb than manually scrolling your way back up there I suppose. But if this has the look and feel of a back-to-top button, I feel like it should give you that option. Maybe I’ll just make that happen if I ever roll this out somewhere.

          • Shaw

            In iOS, tapping the top of the screen scrolls you back to the top, and on most desktop browsers you have a scrollbar to allow quick scrolling. Not sure about Android. What use cases are you envisioning the user needing a dedicated back to top button?

  • Matt D. Smith

    This is smart thinking. Keep exploring! :)

  • AndrewCrocker

    Bottom right seems like a bad choice to me. Right off the top of my head, i can think of three big UX issues with it:

    1. Reaching the icon. If you’re right handed, your thumb a) covers up the nav and b) to reach it you have to double your thumb over to hit it.

    2. OS level behavior. On iOS’s Safari, tapping the bottom of the screen will open their Back/Forward/Share/Tabs menu, which shifts the location of the whole UI (especially things fixed to the bottom.)

    3. Findability. Using non-standard UI is great, as is breaking convention if you have a good reason. But as several recent studies have shown, even a standard hamburger/navicon confuses a lot of users. By putting it at the bottom you will probably see much less navigating by mobile users. This is fine if your goal isn’t to drive people deeper, but if you actually want people to explore your site, at the very least the navicon should be in an expected place, uncluttered, and not blocked by fingers.

    • Sebastiano Guerriero

      Hey Andrew,

      1. True, but I think there’s no area on a mobile device that is “super-easy-to-reach”. I mean not the top, not the bottom, not a single area will be 100% comfortable for all users. Looking at the new Google Material approach, they are suggesting to put a call-to-action button at the bottom right:

      2. True, but this can be fixed by slightly increasing the bottom value

      3. I see your point. The idea behind this snippet was that by removing the header completely, users may try to focus more on the content (a fixed header on mobile is a lot of space). But I should definitely run some tests and see if that’s true or not.

    • Joe Taylor

      1. I wouldn’t say your thumb covers up the nav, when I’m reading something on a mobile device I’ll tend to move my thumb away from the screen, behaviour which I have noticed many others doing. Although I do agree that the bottom right does mean moving your thumb into a not so comfortable position, this could be avoided by placing it centrally or on the left hand side (obviously now we have the same issue for left handed people)

      2. Agree, in my opinion this behaviour on Safari should have been thought through more, call to actions and buttons anchored to the bottom of a browser window aren’t exactly rare.

      3. Agree again, although adding the word ‘Menu’ in small lettering above the icon can help with this.

  • Jlinskill

    Well I don’t love the idea, I admire challenging convention and agree there is always a bit of a learning curve, when new designing patterns are introduced. That being said, I not sure why you wouldn’t just go with a navigation bar on the desktop version that is locked to the top of the browser? Giving the user constant access.

    Honestly, something I have being thinking about lately is moving the entire navigation bar to the bottom of the screen. Yes I know safari Ui on iOS would take issue with this. But didn’t anyone stop for a minute and think about the logic on how they reached that result in the first place?

  • juliendumail


  • Nick

    What software do you use to create animated gifs like the one at the top of this article?

    • Léo

      After Effects

      • busycloud

        Feels like you should maybe create a small post on how to animate your interactions. This is a very smooth interaction demo!

  • Šime Vidas

    The menu is cut of in landscape mode: You could make it responsive by rearranging the items in a two-column view (via CSS media queries).

  • alwaysunday

    This is great.


    I love this, and think I’ll be using it. Regards the location, bottom right is usually where you would find the back-to-top button and why would you use that other than to return to the menu, so what better than putting the menu bottom right instead. It will speed up new page selection.

  • W. van Dam

    Re-using the “back-to-top” location is an interesting proposition.

    Last month we prototyped and built a similar solution for a website that’s going live early October. The main differences are that we fade-in the button at the top left corner, and that the button toggles the visibility of a fixed positioned copy of the header menu. We felt that the top position was more familiar to our audience and didn’t want to confuse them with a different menu layout.

    A few bits of feedback on your implementation:
    1. Consider the UX effect of a disappearing opened menu when the user scrolls back to the top.
    2. Throttle the scroll event for better performance on mobile.

    Wouter van Dam

    • Sebastiano Guerriero

      Interesting points indeed. It’ll be cool to take a look at your version once it goes live.

  • francoiscoron

    Super plugin ! Great job !

  • fangge

    damn great!!thx~

  • thesherps

    Nice. I dig this.

  • B MAC

    Anyone know a way to make it automatically close the menu when you click on an item?

    • Sebastiano Guerriero

      The menu doesn’t close because it should be the main navigation (click –> go to another page). But if you want the smooth scroll effect, you can take a look at how we did here:

  • Ricardo Torres

    I did something like this some time ago. The nav button is placed on the top-left (or right).

    Open or and resize the window to have less than 650px.

    • Sebastiano Guerriero

      Nicely done!

    • Sergey Dubovik

      Nice, but if you’re using a smartphone its much easier to reach the button that is at the bottom of a screen.

  • Nimsrules

    Thanks for this wonderful navigational system. I have a couple of queries:
    1. How to make the menu animatedly open from top-left instead of bottom-right?
    2. How to close the menu and reset the trigger to its original icon when clicked anywhere else on the body?

    • Sebastiano Guerriero

      The button is in fixed position, so you can just modify the Left and Top values to move it to the top-left (remember to remove the Bottom and Right properties though, or setting their values to Auto). For point 2 you should use some jQuery, it’s a bit more complex

      • Nimsrules

        Hi Sebastiano, thanks for the reply but,
        1. I already positioned the button but what I need is to open the menu with animation from the top-left point.
        2. Can you kindly include this particular code in the article itself? It’ll be help for touch devices.


        • Sebastiano Guerriero

          1. you should change the position of the inside the #cd-main-nav too to match the one of the button

          2. We may add this soon, but for the moment we have couple of new resources to focus on. Meantime you can check how we did on other resources

          Cheers ;)

        • qcha0s

          I think what you were asking (that sebastiano missed) is the “how to you change the origin of the animation” … the short answer is in the “cd-nav ul {” css block. where they have the transform-origin set to 100% 100% (x y = bottom right) … I changed mine to 100% 0% and the animation runs fro the upper right.

          If you want ti to run from the top left, set the transform-origin to 0% 0%.
          Hope that helps!

          • Nimsrules

            I figured out that while playing around but that did help bro. Thanks!

          • qcha0s

            no worries! Glad it was useful :-)

          • Keith Chastain

            Ah… thanks qcha0s! I was trying to figure this out as well.

  • veeroo18

    this thought I had in mind but also thought that there may be there would be technical problems thats why its not implemented all over on internet till now !! but you did it !! bravo !!

    Thanks !

  • Alp

    What’s “smart” about a navigation, that doesn’t even work in IE8?

    • reidark

      Feel free to get stuck in the past.

      • Alp

        Say this to the clients, not to me.

        • Ian Patrick Hines

          Honestly, I’m just up front with clients that I won’t support IE8 or lower. And I’ve never had one decline a project over it.

        • Thierry Rene

          its your job to show up the techs available in the market and why they should use them.

  • Car Sten

    Hello Sebastiano, this is very nice. How can i hide the menu in the top navigation? i only need the button menu? Thanks Carsten

    • Sebastiano Guerriero

      You could try giving a display:none to the .cd-nav by default, then adding a display:block to the same element when it has the class .is-fixed

      • Vitor Fiore

        Worked nice! Thanks Sebastiano!

  • Nishant Guleria

    Hello Sebastiano, I just wanted to know that how did you make those GIF’s which represents the OLD and then NEW on this same page…I made some with photoshops for my projects but they are not smooth…Please help…

    • Sebastiano Guerriero

      Hi Nishant, the preview was created in After Effects

  • StNick

    Awesome design pattern, I like it very much. Especially when you consider that modern users have to deal with huge phones these days. I was wondering though, how can you implement this script for mobile users whilst using this piece of magic for desktops & tablets:

    It would be awesome if we could somehow combine the two for a perfect experience across all devices.

  • Tuấn Phong Trương

    Hey, I have trouble with close button, it does not lie within. You can help me
    p/s: sorry, my english is bad

  • Chris

    Hi, Is there a way to close the navigation by clicking elsewhere on the html document?

  • J Smilanic

    I’m loving this navigation. I’ve had it on a site I’ve been developing for a while. Works great in Chrome, Firefox and IE but I’ve noticed a problem in Safari (windows, safari 5.1.7). On the desktop version of the site, when you scroll down to where the menu icon pops up in the bottom right, and then scroll back up to the top of the page, the top header navigation no longer appears. Have you tested this in Safari? Could it be on my end? Thanks in advance!

    • Claudia Romano

      Glad you liked it!
      We didn’t test it on Safari for Windows because it’s an outdated browser ( the last update has been released more than 2 years ago). It works perfectly on Safari for Mac though ;)

      • J Smilanic

        Good point. Thanks for getting back to me!

  • Chaz Le

    How do you use this and the back to the top script AT THE SAME TIME?

  • Bertus Schoeman

    Nice! Would it be possible for me to add this to my company’s WordPress website?

  • Rehman Ali

    Really such a nice and useful really works.Thanks

    Favorite Night Club WordPress Themes

  • Dennis Hurley

    This menu is great! Thanks so much for sharing and walking through it. I have one question… Is there a way to make this menu open and close via Javascript? I am imagining a line of jQuery but I can’t figure it out. D

  • Emraan

    Love the menu…just great work….
    I have facing the problem that when i add more list in menu item more than 6 or 7 i cant scroll it in mobile….don’t know if i m making any mistake or what i cant figure it out ….can u please help me on that…..i m not much familiar with jquery.
    only page scrolls not menu

    • Claudia Romano

      Hi, glad you like it!Try adding to the #cd-main-nav ul the following style:

      Hope this helps!

  • Emraan

    thanks for the help …. but i can’t find the #cd-main-nav in any file…..its only in main.js file. how to put style in that file…please help

  • Emraan

    hey its done.. i was missing the line

    /* remove overflow:hidden if you want to create a drop-down menu – but then remember to fix/eliminate the list items animation */ from style.css…

    anyways thanx for the awesome menu……

  • Emraan

    again one problem.
    It still shows scroll bar in header menu on top.
    How to remove it.
    if i removes it , it also removed from popup menu.

  • Steve

    Great script – but I need to add a dropdown to some of the items .. I tried removing the overflow:hidden part but the dropdown part shows all the time, not just on hover. Can you help? We added the dropdown list like this:


    test sub page


  • Malte Fischer


    love the menu, but unfortunately it shows up with little dots per list item on mobile devices. Is there an easy way to fix this ?

    Anyway, keep up the good work, I really appreciate it !


    • Claudia Romano

      Hi Malte, glad you liked it!
      Make sure that the element inside the #cd-main-nav has a list-style: none. That should do it!

      • Malte Fischer

        Thank you for getting back to me – I will try it out.

        • Brahime Y-ch

          hi malte
          can you help me please
          i’m new at this stuff and i like this quickview modal
          please if you can help me with it

      • Brahime Y-ch

        Hi Claudia Romano
        i want your help plz i see one of your your modal
        and i like it so so much
        i want to use it in my project
        so if you can help me with it
        it’s called product quick view !

      • Maltē Fìscheř

        Hi Claudia, it worked, thanks a lot. However, another question still is, how to make the menu close, if you click somewhere else on the page. It is probably something with :

        else {toggleNav(false=}

        but where and when in the code, I can’t figure out.

        I would really appreciate your help,


  • David de la O

    Great job!

  • Ash Stallard-Phillips

    Great work! I have installed completely fine, I was just wondering whether it’d be possible to stop it from loading #0 in the URL onclick?

    • Claudia Romano

      Hi Ash, thanks!
      In the main.js file, replace:


      Hope this helps!

  • Barun Gautam

    I loved this menu.

    When I used the css files, the menu worked perfectly.
    But when I tried to implement the scss files I got some problem with layout as in the screenshot I sent you. Can you help me to easily fix this?

  • Mimi Bryl

    I love this but wonder how to use it for really complex navigation, from a UI, not a code, perspective. I have 15 nav items (they’re secondary to the top-level navigation, which only has 4.) But within this 15 element secondary nav, there are some tertiary nav items that can contain up to 7 items. Any suggestions?

  • Kevin Hamil

    Any chance anyone could help show how to get this integrated into a wordpress menu? I’ve been at it for a couple hours now, but not quite getting it. If anyone has a working example of this I would love to see how. Thanks.

  • Yo Nas

    1. What if I just want the smart nav to show up on default without having to resize to 1170px?
    2. How to close menu automatically after selection?
    Much appreciated!

    • Yo Nas

      Nevermind I figured it out..
      1. listed in the chat i didn’t realize..
      2. $(“#cd-main-nav ul li a”).click(function () {
      $(“#cd-main-nav ul”).removeClass(‘is-visible’);

  • Girish Pant

    Hi, Can yoy tell how to set width and height of the box and spacing between the list items

  • 1stoffendment

    Completely awesome site and work!! If I want to add drop down menus, I read how you remove overflow:hidden and fix or nix the animations. The issue I am having is that my drop down is displaying as one row (horizontally) and pushing the other menu items across the page. On the nav trigger, the dropdown expands below the main portion of the pop up menu (z-index issue?). Can you point me in the right direction? Thank you.

    • PLS SNO

      Hi 1stoffendment,
      Did you ever resolve this issue, I am having the same problem.

      • 1stoffendment

        unfortunately, no. I ended up abandoning the menu.

  • David Greer Jr

    I love this nav!!! I tweaked it a bit to have it always visible, animate it from the top left toward the bottom right, and added in subnav that uses the same animations as the regular nav plus some of my own animation (drop-down arrow, etc.). Everybody I have showed it to absolutely loves it, and I found it very easy to customize. Thank you.

  • Kabolobari

    Can anyone here who may know direct the rest of us Genesis fans how to integrate this into a Genesis theme so that it pulls the “primary navigation” menu items defined in the admin?


  • Daniel Paguaga


    Does anyone know how to add a 4th image box to the main screen as there is only 3 now…… I want 4 then when it shrinks to pad view I want 3 and then to mobile view I would want two!! Thanks in Advance

  • Emeka Emmanuel

    Hello can i make it open when scrolled to the bottom? In pc version alone.?