full screen pop-out navigation
August 5, 2014 | 103 Feedbacks

Full-Screen Pop-Out Navigation

Here is a fixed menu that drives users' attention to a couple of call-to-action buttons first, then let them explore the full-screen navigation.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

It’s becoming a common approach to hide the navigation, make it accessible after a click on the menu link. “One click more than necessary” some of you may argue. It really depends by the specific case IMO. I mean Amazon could never hide the entire navigation on a big device. But if you have a website with a relatively modest quantity of content, a huge menu with few important call-to-action buttons, it makes sense to drive the user’s attention to those buttons first, then let her/him explore the rest.

One step further is to make the header – therefore the menu link – always accessible. We already suggested a new approach to achieve that. Today we take inspiration from how Medium reveals the header when you change your scrolling direction – from down to up. Quite smart!

Image credits: Unsplash.

Creating the structure

We created a <header> element to wrap the logo, the secondary navigation (login/signup) and the trigger for the primary navigation (.cd-primary-nav-trigger). The primary navigation is outside the header, which makes it easier for us to handle the CSS transformation effects. Both primary and secondary navigations are unordered lists semantically wrapped into a <nav> element.

Adding style

First of all, to create the slide-in effect of the primary navigation we use a combo of CSS3 transitions and transformations. By default the navigation is hidden by pushing it right above the viewport (translateY(-100%)). When the user clicks on the trigger element (.cd-primary-nav-trigger), we use jQuery to add the .is-visible class to the navigation. The transition applied to the transform property smooths the movement.

For the header slide-in effect – activated when the user changes the scrolling direction from down to up – we needed to create some classes and handle them through jQuery. By default the header is in absolute position: that means that it scrolls with the content (it’s in absolute position so we can place it on top of the background-image). As soon as the header is no longer visible, we give it a .is-fixed class, thus changing its position from absolute to fixed, and placing it right above the viewport (top: -80px). As the user scrolls up, the header gets back: we give it the .is-visible class, this way we move it down along the Y axis (translate3d(0, 100%, 0)).

Events handling

When user starts scrolling, we need to detect if he’s scrolling up or down, and add/remove classes to the primary navigation accordingly :

The header slide-in effect has been implemented only when the viewport is larger than 1170px (the MQL variable has been defined in the .js file).
iOS devices, in fact, freeze the DOM manipulation during scrolling, so functions are executed only at the end of the scrolling (we couldn’t find a bug report, but here is what jQueryMobile says).


Aug 5, 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.

  • Amit Kolambikar

    Awesome,the design of your demo itself is slick!

    • http://codyhouse.co/ Sebastiano Guerriero

      Thanks ;)

      • Marcus

        Hey Sebastiano, I’m having some difficulty getting the “is-fixed” and is-visible to fire.
        Is there a way I can send you my file?

  • Kyle Rolfe

    Would be ideal to keep or adjust for the scrollbar so you don’t get the shifting content. Other than that though, very nice design.

    • http://codyhouse.co/ Sebastiano Guerriero

      Indeed. I’ve been struggling with the way the scrollbar behaves on Windows (not a problem on Mac). If any of you guys has a suggestion about how to do that, please share into the comments

      • Amit Kolambikar

        If you remove the class of overflow-hidden to the body,the scroll bar remains intact

        • http://codyhouse.co/ Sebastiano Guerriero

          right, that is an option if you’re OK with 2 scroll bars (in case the main navigation is >100% height)

  • Antonio Junior

    Github link? :)

  • Antonio Junior

    I will always ask about projects on Gihub, to fork. :P

  • HemanthMalli

    All the above codes are really useful to the new users in their web designing. this site provides the matter and codes as expected

  • brutyke

    Nice looking script!

    Is there an easy way to make it slide out from the left ?
    The graphic above implies you can, but the demo slides in from the right.

    And, can you have 2 pop-outs on the same page ?
    eg. #cd-lateral-nav1, cd-lateral-nav2 etc…

    • http://codyhouse.co/ Sebastiano Guerriero

      By default the .cd-primary-nav (div containing the main navigation) is hidden on top, off the canvas, by using the translateY property. Just use the translateX property if you want it to slide in from the right (or left)

    • brutyke

      Thanks, but I think there’s a misunderstanding. I’m using the Secondary Expandable Menu not the Full Screen Pop-out, so .cd-primary-nav doesn’t exist.

  • Sean

    This is my (current) favourite type of navigation for mobile devices. Nice clear and easy tap targets. I’ve seen many responsive menus get too crowded and small. This is very slick, although it bothers me slightly to force the user to open a menu on desktops. Is the extra click to get to navigation harming the user experience?

    • http://codyhouse.co/ Sebastiano Guerriero

      it could IMO, it depends by what kind of information you have inside the navigation. I mean in this case we want the user to focus on Log in and Register. And right below the title we could put a call-to-action button. It’s a case scenario similar to http://www.squarespace.com/.

      • Sean

        That’s true, and Squarespace have a lot of content links within their nav and I think it works. Tempted to try this out soon. Thanks for sharing the resource.

  • Sean Herman

    Really nice work! :D When I click a the window stays open. What would be the best way to close this once you’ve clicked a nav item?

    • http://codyhouse.co/ Sebastiano Guerriero

      In theory, by using real content, each anchor tag (inside the list items) should link to a page. We couldn’t do that into the demo, but by clicking on a element you should just move to a new page.

      • Sean Herman

        Ah ha. That makes sense. I am using it on a single page navigation site using hashtags. So I wonder if there is a class I could place in my to close the modal? Any ideas? Thanks again for the wonderful script! Super fresh.

        • Claudia Romano

          Hi Sean, you need to add this code to your .js file:

          Hope this helps! :)

          • Sean Herman

            Worked perfectly. Thank you @claudiarrromano:disqus!

        • Martynas Andriejaitis

          I added custom jq:

          function closeMenu(){
          $(‘.cd-primary-nav’).removeClass(‘is-visible’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’,function(){

          $(‘.cd-primary-nav li a’).click(function(){

  • Ken

    Great script and execution. Wondering what would it take to have this work with a fixed width inner container and fluid width outer container. For example if you have a typical header/menu layout: where the container has a max-width of 1170px how could this script be adapted to work in that scenario?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Ken, I guess you’re referring to the secondary (full screen) navigation. I think you can just give a max-width to the element, with no need to create an additional . Besides you can play with the “display” values of the list items if you want them to take the whole space (display:block)

  • Ralph Häring

    Wonderful, Sebastiano! Really like your work. My CMS is configured, that the regular navigation-menu disappears on screen size below 760px. Instead, your navigation should appear. Just wondering if you could do a 2nd Version. I am struggling with the CSS file to get the following result:

    1. The whole navigation is not visible on bigger screens [@media screen]
    2. At smaller screen sizes [@media screen and (min-width: 760px)], the navigation appears with the trigger and the white text “MENU”. The header should be blue and not transparent.

    Basically, your navigation is only needed on mobile devices. Possible? Would be very nice and cool, if you could do me this favour.

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Ralph Häring , 1. you can hide the main navigation by using the following code:

      About the button, on small devices the .cd-menu-text has display:none. The first step would be to remove that property, then play with the style

  • http://dffernandez.com/ Daniel Fernandez

    Sebastiano. Congrats, great script…

    I would like to know if there is a way to remove the jump it does when there is a scrollbar and you open the nav. I’m on a mac and it’s happening on all of the browsers. I’ve tried (chrome, safari, firefox and opera)

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Daniel! Yes, you can remove the overflow-hidden classe given to the body when the navigation is visible

      • http://dffernandez.com/ Daniel Fernandez

        Thanks Sebastiano. I guess the downside is that you get a sidebar and the background scrolls.

        PS. If you ever find a way to achieve the same without having these please post an update (if possible :)

        • http://codyhouse.co/ Sebastiano Guerriero

          Right, we haven’t for now, but I’ll try to fix that :)

          • http://dffernandez.com/ Daniel Fernandez

            Thanks man.

            Also. I wanted to ask you. I have been trying to change the color on hover (for the word menu and the hamburger icon). I’ve been able to trigger the word but I don’t seem to find how to change the color on the icon. Any ideas. Thank you.

          • http://codyhouse.co/ Sebastiano Guerriero

            you need to change the background-color of the .cd-menu-icon

          • http://dffernandez.com/ Daniel Fernandez

            Sebastiano. When I apply a hover estate to the .cd-menu-icon no matter where I’m in the page the hover activates.

  • Sean

    Just playing around with this at the moment. You state that the cd-header is positioned absolute in order to sit over the background image. If I remove the position: absolute in order for it to sit above the rest of the content, this works but the cd-primary-nav-trigger jumps from where it should be positioned to lower down the page. Any suggestions?

    • Sean

      In addition to the above, I’m looking for a way to keep the cd-header contents (logo and secondary nav) a maximum width. I.e they do not stick to the edges of the window as it’s made larger.

      • http://codyhouse.co/ Sebastiano Guerriero

        Hi Sean! RE the header position, if you remove position:absolute, make sure to add a position:relative (since the cd-primary-nav-trigger is in position:absolute itself, its top and right values depends on the closest parent with a relative position).

        About the header content to have a max-width, you can simply create another inside the header – this new has to wrap all the header-content – and give it a max-width

        • Sean

          Thanks for the reply. The header position has been done, thanks for the guidance.
          With regards to the width, I have tried wrapping everything within the with a simple .wrapper div. Gave this a max width of 960px (for example) but it does nothing and doesn’t affect it at all?

          • http://codyhouse.co/ Sebastiano Guerriero

            Yes, you should try giving this .wrapper div a position: relative (it may be necessary to give it also a height 100%)

          • Sean

            That’s got it! Thanks for the help. Much appreciated :)

          • Sean

            Just one minor that seems to be occurring. I know it has body.overflow-hidden in order to prevent the background scrolling. This works on the desktop site, and on a mobile (iPhone) but when testing on an iPad the background scrolls. Any ideas as to what would cause this?

          • http://vk.com/svetlanamalakhova Svetlana Malakhova

            Hi there, I also have the background scrolling on iPhone. How did you fix it?

  • Sam

    Wow amazing! How do I get the menu icon on the left side instead of on the right?

    • http://codyhouse.co/ Sebastiano Guerriero

      you can increase the padding-left of the .cd-primary-nav-trigger and change the ‘right: auto’ and ‘left: 1em’ for the .cd-menu-icon

  • Emily

    Sebastiano. Great Script.

    Is there a way to vertically center the content when the menu opens.


    • http://codyhouse.co/ Sebastiano Guerriero

      I’m afraid not with the current html structure. You should have something like:

      and give a position: absolute to the .new-class, trying to center it with a top: 50% and translateY(-50%). That may require for you to set a fixed height for the navigation though.

  • Geoff

    how would the js need to be updated in order to make clicking anywhere to close possible? great script btw!

  • Geoff

    Ahh, solution adapted from below (not sure if this is the most elegant way):

    $(‘.primary-nav’).on(‘click’, function(){
    $(‘.primary-nav’).removeClass(‘is-visible’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’,function(){

  • Sam

    I want to change the size of the hamburger icon, but when I change the height of the lines in .cd-primary-nav-trigger .cd-menu-icon { } it becomes a block, how can I set a distance between the 3 lines?
    I really can’t figure it out. Any help is very much appreciated!

    • http://codyhouse.co/ Sebastiano Guerriero

      In order to change the hamburger icon you need to change .cd-menu-icon. The distance between the lines is the top value for both the ::before and ::after pseudo elements

      • Sam

        Thank you so much! Can’t believe it was this simple and I missed it! :D

  • Sahil Vhora

    I want the navigation appear on the mobile devices as same as it appears on the desktop screen when we scroll up the page. How can I do that?

    • http://codyhouse.co/ Sebastiano Guerriero

      There’s a bug on iOS7 and below, you can’t animate an object while the user is scrolling (actually the animation/transition in CSS3 will happen only after the scrolling has ended). This has been fixed in iOS8. If iOS7 is not a main concern for your project, you can move the classes (.is-fixed..etc) from the 1170px media query to a lower one (also make sure to update the MQL variable into main.js)

  • Bobby

    anyway to change the header of the second nav from a transparent to a color??
    i cant find a way

  • Trip Pruitt

    Love the functionality but my nav is opening automatically on safari and mobile browsers when the page loads. Has anyone else had this problem? I haven’t changed the script or scss at all. The only difference is that I have my html is a php file.

  • Sherif SALEH

    Really good work :).

    i’d just add overflow hidden to body
    nav-trigger > click
    to prevent the double scroll.

    also testing with Velocity.js to support internet explorer 8.

  • http://michaelgeddie.com Michael Geddie

    Great menu – exactly what I was trying to figure out… I’m pretty new to this, so I’m hoping someone could help me out. When the menu is closed, I want the text to be white, but when the menu opens, have the text change to black. I’ve tried to mess around with the code, and I can change the color permanently, but I’ve not been able to figure out how to change it on click. Any advice or assistance would be greatly appreciated!

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Michael, you can use the .menu-is-open class – added to the .cd-header element when the navigation is visible – to target the event and change the text color

  • Shaheer Javaid

    code problem in internet explorer on scrolling navigation not show in internet explorer please give me solution
    i want add has hasscrolled funtion but not able to put ina proper way please give me solution

  • drolfe

    Hi Sebastian, thank you for this really great menu. I’m working on a project and I integrated your menu; however, when I load the website on a mobile device the menu does not load as the mobile version. Here is the github: https://github.com/drdesign/QualiaAnalytics and the website is: http://www.qualiaanalytics.org/testsite/index.html

    Could you provide some feedback? I really would like to git this resolved.

  • Mike

    Hello, first of all: Great, great script. Is it possible to make the menu bar sticky? Does anyone have a solution?
    Best regards

    • http://codyhouse.co Claudia Romano

      Hi Mike, glad you liked it! :) try adding the .is-fixed and .is-visible classes to the header element (in the html) and removing the window.onscrolling function in the js file (lines 6 -28). Hope this helps!

  • Sakir

    I’m making an one page website. I want to automatically close the fullscreen navigation menu after clicking a link from that. So that the user won’t have much trouble to close the fullscreen menu. Can someone give me a script?

    • http://codyhouse.co Claudia Romano

      Hi, give a look at the replay we gave to Sean Herman (below in the page). Cheers!

      • Sakir

        Thanks :D But I wanted to close the modal after clicking . As I’m using anchors in an one page site :/

  • http://dffernandez.com/ Daniel Fernandez

    Hi sebastiano and Claudia. I just noticed smoothing. On an iPhone, when you open the nav and scroll down. Let it stop, then scroll again and you’ll see that that background (page) starts scrolling with just the header for the nav. Is there a way to fix this?

    • http://codyhouse.co Claudia Romano

      Hi Daniel, thanks for the heads-up. Try adding in the js file (right after the currentTop variable declaration – line 12) the following lines:

      Hope this helps!

      • http://dffernandez.com/ Daniel Fernandez

        Claudia thanks a million for the answer. I tried that but it’s still doing the same. What it did fix was the scrolling bar jump it used to do. My code for those lines looks like this.

        function () {

        var currentTop = $(window).scrollTop();

        //check if user is scrolling up




        if (currentTop < this.previousTop ) {

        //if scrolling up…

  • http://markandphil.com/ Daniel Schutzsmith

    Has anyone gotten this to work in a WordPress theme? I’ve turned off all plugins, made sure the noconflict mode isn’t messing it up, and made sure all the styles and scripts are enqueueing pr0perly but it’s still not firing any of the javascript. :(

    The site is http://ftw.markandphil.com/

    • http://markandphil.com/ Daniel Schutzsmith

      Nevermind, I figured out what it was. Cannot use or it breaks:

      html, body {
      height: 100%;

  • Christian Eg Tandrup Nielsen

    Hi thank you so much for the script, it’s great! I’m trying to get the menu to close when scrolling (one-page site), any ideas on how to do this? .

    • http://jst-media.de Jonathan


      you have to adjust the main.js by adding an event to close the menu once a link is clicked. I figured a way out, I described it in my blog here:


      The article is written in German; you have to scroll down a little bit, the code is at the bottom of the page at the end of the article. The respective code starts at line 47. Please not that I also changed the .css labels in the main.js in order to fit to my needs.

      Don’t know whether there are better options to do this. However, it works for me.

  • http://alexkerber.com/ Alex Kerber

    Yeah, seems to be broken on Chrome. Looking into the code right now. Chrome doesn’t add the is-fixed or is-visible class when you are scrolling down. The header is just stuck on the top section.

  • Laura

    Hi! I’m getting half an ‘X’ in Safari – even with the demo. Is this a webkit issue?

    • http://codyhouse.co Claudia Romano

      Hey Laura, just checked and seems to work fine. Which version are you using? Thanks

      • Laura

        It’s working fine now. So sorry. Site is going live today and my designer was freaking out. Thanks! Awesome work!

  • Felix

    Hi Sebastiano, thanx a lot. This is a really nice design! Unfortunately I am having issues on Android up to version up to 4.3. The menu remains open and can not be closed. The newer Android versions work well.

    Do you have any idea how to fix the script on to work on the older versions as well?

    • itzuki87

      I have the same problem as well. In the meantime, did you solve the problem?

  • Meuwka

    great navigation! thanks! but I got bug on ios, my fix

    body.overflow-hidden {
    /* when primary navigation is visible, the content in the background won’t scroll */
    overflow: hidden;

    /* fix body scrolling for devices */
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;

    • http://codyhouse.co/ Sebastiano Guerriero

      thanks for sharing the fix ;)

    • http://vk.com/svetlanamalakhova Svetlana Malakhova

      Hi there, thank you for sharing this code. It does fix body scrolling, but only if you are at the top of the page. If you are in the middle of the page and you click on the menu, it brings you back to the top as soon as the menu is open. Is there any way to fix that?

  • LA

    How can I add hover to the secondary menu icon and secondary nav? Thanks :)

    • http://codyhouse.co/ Sebastiano Guerriero

      .cd-primary-nav-trigger:hover for the hamburger menu, while .cd-primary-nav a:hover to stylize the links of the navigation

  • SamuelC

    I implemented this awesome menu in a project. The problem is when i open the menu the page scroll to the top. I really don’t understand why! Hope you can help me…

    • http://codyhouse.co Claudia Romano

      Hi Samuel, try adding an event.preventDefault() when clicking on the menu icon (on line 32 in the js file, replace


      Hope this helps!

      • SamuelC

        I already try this, probably I have a problem in the rest of my js code. Thanks anyway for the reply, highly appreciated :)
        And congratulations for your works!

      • David Unzué

        Hi Claudia, actually the problem SamuelC described occurs because of adding the class “.overflow-hidden” to the body, since the page scrolls to the top immediately after the menu transition ends and the class is added to the body (see Line 42-45 in “main.js”).

        This is occurring on Chrome (my version is 45.0.2454.101). Firefox is working for me.

        Do you have any solution?

  • Ted

    Is it possible to change the primary nav transition to a fade open instead of a slide open? Great script!

  • riyan mohammad zaman

    i wanted to add modal form from bootstarp but it dosent work … anyone know how to get a use a model in this template

  • Ranendra

    How can we add smooth scrolling for the menu links.

  • http://4lan4raujo.com/ Alan Araujo

    I’m having trouble adding an animation the menu disappears !!

  • http://www.3reative.com Usyakuza

    having a problem with the cd-primary-nav. the pages work fine, except for the contact page, when I click on the menu, it drops down and shows the menu, but the text fields from the form is still showing, can anyone give me some help. I tried adding a z-index, but still not joy. Help please

  • Rob Chan

    Awesome stuff! @seguerriero:disqus or anyone in the comments – what would be the best way to go about floating a sticky column to the right of the text? Perhaps not even sticky, but at least a column to the right. I tried using float, but because there are margins set, it’s not working.


  • Joel Farrell

    I really like the smooth transition of the nav. Is it possible to link to anchor tags on the same page? Also, what about a close on click event?

    • Emmanuel K Eban

      yes its possible i tried it before and it worked for me..something like this should do



  • http://rankeyftw.tumblr.com/ rankeyftw

    Thanks mate !

  • GeLiGeLu

    Your code has been used to great effect at the Fighting Cock Spurs Fanclub


    I found the js file – it’s your code verbatim.

  • https://www.sage.care/ Lucas Lu

    Is there a way to write code that only affects a particular breakpoint (ie. MQ(M)), without affect others?

    Example: I have some styling code for the tablet view, but it also affected desktop view, so I had to write a lot of code inside “MQ(L)” just to overwrite it. I’ve tried modifying layout.scss to be something like “@media only screen and (min-width: $M) and (max-width: $L – 1) { @content; }” but it didn’t work.

    Thanks guys!

  • Marcus

    Hey Sebastiano, I’m having some difficulty getting the “is-fixed” and is-visible to fire.
    Is there a way I can send you my file?

  • Ben Metcalfe

    Noticed that if you click show menu then scroll down real quick, you cannot close the menu..

  • Giovanni

    In Chrome 52.0.2743.116 when scroll up the menu doesn’t appear. Is there a solution?