smart fixed navigation
July 4, 2014 | 62 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
9+

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:

Changelog

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.

  • http://www.thenerodesign.com Marco Grimladi

    There is a bug when you resize the browser

    • http://codyhouse.co/ Sebastiano Guerriero

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

      • http://www.thenerodesign.com 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

        • http://codyhouse.co/ 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 ;))

          • http://www.thenerodesign.com Marco Grimladi

            :D of course :D

  • http://coda.co.za/ 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.

    • http://codyhouse.co/ 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

    • http://www.joshuastevens.net 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?

    • http://codyhouse.co/ 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

    • http://codyhouse.co/ 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.

    • http://thilak.in/ 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…

    • http://codyhouse.co/ 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.

          • http://brokensquare.com 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?

  • http://mds.io/ 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.

    • http://codyhouse.co/ 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:

      http://material-design.storage.googleapis.com/images/materialdesign-goals-landingimage_large_xhdpi.png

      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

    li:last-child{border-bottom:none;}

  • http://www.filesgang.com/ Nick

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

    • http://webl.eu/ 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!

  • http://webplatformdaily.org Šime Vidas

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

  • alwaysunday

    This is great.

  • StuMORRIS

    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.

    Cheers,
    Wouter van Dam

    • http://codyhouse.co/ 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?

    • http://codyhouse.co/ 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:

      http://codyhouse.co/gem/vertical-fixed-navigation/

  • Ricardo Torres

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

    Open http://biocoreambiental.com.br/ or http://polisystem.com.br/ and resize the window to have less than 650px.

    • http://codyhouse.co/ Sebastiano Guerriero

      Nicely done!

    • http://dubovik.org 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?

    • http://codyhouse.co/ 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.

        Regards.

        • http://codyhouse.co/ 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 http://codyhouse.co/gem/simple-confirmation-popup/

          Cheers ;)

  • 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 !

  • http://77elements.com/blog/ Alp

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

    • http://about.me/reidark reidark

      Feel free to get stuck in the past.

      • http://77elements.com/blog/ Alp

        Say this to the clients, not to me.

        • http://www.ianpatrickhines.com/ 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.

        • http://www.thierryrenewebdev.com/ 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

    • http://codyhouse.co/ 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

  • http://html-wordpress.com/ 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…

    • http://codyhouse.co/ 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: http://codepen.io/hkfoster/pen/zulGs/

    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?