mega-site navigation
November 5, 2014 | 217 Feedbacks

Mega-Site Navigation

A responsive and easy to customize navigation for mega-sites, enriched by subtle CSS animations and support for devices with javascript disabled.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

We’ve already shared some navigation solutions here on CodyHouse. They can suit small to middle websites, where navigation is not that challenging. This time we wanted to work on something more complex: a mega-menu!

About the challenges: starting from mobile, I didn’t want the “accordion” effect to reveal the sub-items (like we did with the Secondary Expandable Navigation). So I went for a slide-in approach. Also, since the downside with mega-menu is that main categories are generally not clickable, I introduced a “see all” button (if you check the demo, you immediately get what I mean).

On bigger devices, I tried to avoid the never ending nested approach, when you move from one column to the other while surfing sub items. Showing the secondary navigation options right away looks like a better UX solution.

The icons included in the source file have been created by the talented Dario Ferrando and can be download for free on Freebiesbug.com.

Creating the structure

The HTML structure of a complex navigation is generally composed by nested unordered lists. This one makes no exception. We created 4 main sections: <header>, <main>, <nav> and .cd-search <div>. You may be wondering why the navigation is not wrapped into the <header> element: we do move it inside for bigger devices (viewport width >=1170px) using jQuery. On smaller devices it was way easier to handle the navigation as a separate element.

Adding style

The CSS is pretty simple, although the amount of code required for this nugget is higher compared to our average resource. You can download the source file and check how we achieved some nice animations from there.

One important thing: I created 2 classes that can be used to change a bit the navigation behaviour. Note that both classes must be applied to the <body> element:

I don’t know if you folks use pre-processors for CSS or not (We use SASS for all our resources). If you don’t, I’d really encourage you to give it a try. As an incentive, check how easy it would be to change some of the navigation settings with SASS (yep, you can set variables!):

If that sounds scary, this guide by WebDesignerDepot could be a good starting point.

Events handling

We didn’t do a lot in jQuery, apart from adding classes according to specific events. The only important thing to note is that in the starting HTML structure the navigation is outside the <header>. Since we created this resource starting from mobile, we wanted the navigation to be on the side, hidden by default, and it was easier for us to have it outside the header.
On desktop devices (viewport width more than 1170px), we use jQuery to move the navigation inside the header.

Changelog

June 17, 2015
  • Bug fixed on IE9 - icons position inside .cd-nav-icons unordered list
Jan 2, 2015
  • Bug fixed on IE11 - .cd-overlay covering navigation
Nov 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.

  • Mirko

    Just one word : Brilliant !!

  • Chaitanya Ramji

    Awesome

  • Hamza

    i like this

  • http://creativetemple.co/ Timur

    Now, this is how Mega Menu should look and function! I just love the way you constructed it to look on smaller devices. Incredible job and thanks for sharing! :)

  • osgregs

    show de bola

  • http://anishmalias.url.ph/ Anish M Alias

    good one

  • Jakub Vitek

    Great one ! :)

  • maketimetodesign

    Awesome example!

  • http://viii.in Vinay Raghu

    This is great stuff. Out of curiosity, what software do you use to create the hero image?

    • http://codyhouse.co/ Sebastiano Guerriero

      Photoshop

      • http://viii.in Vinay Raghu

        All of them look very beautiful

        • http://codyhouse.co/ Sebastiano Guerriero

          Thanks mate ;)

  • Brandon_Arnold

    Nice job, Sebastiano!

  • InterwebsCat

    This works great, but a quick question. Trying to get this to work with Headroom.js doesn’t seem to have any luck. Any recommendations?

  • Spadow

    Do you create the wireframe images by yourself or do you use a kit? If so, where do you get it?

    • Samir Habib Zahmani

      Exact same question, the result is pretty damn good and if there’s a kit or software to get such a result rather quickly, I would like to know too please !

  • Poseydon Espilacopa

    Hello,

    Would you like to use this template as the basis for developing websites to sell to customers and companies. Can I use?

    Thank you, …

  • http://www.butenas.com/ Ignas B.

    Really nice job. Worth to spend time and see how it’s done and learn!

  • http://www.dario.io Dario Ferrando

    Hey! thanks for mentioning my icons. Love the menu!

  • http://www.linkedin.com/in/socoastal/ Justin Urich

    You just answered my prayers! This is EXACTLY what I was looking for, for an upcoming project. Really appreciate you taking the time to create and share.

  • http://umar.info/ Umar

    Is it compatible with Bootstrap 3?

    • http://codyhouse.co/ Sebastiano Guerriero

      it’s not based on Bootstrap, but it can be made Bootstrap compatible quite easily

      • http://umar.info/ Umar

        Alright … Thanks for the info.

      • Sanj

        Sebastiano, this is totally amazing! Is there any chance you could provide a Bootstrap Version please?

      • Matthias Walti

        anyone interested in creating a BS3 version (paid work)?

  • http://www.telegramlive.com/ kimberly

    wow great share

  • teslahui

    Is there a possible way that could make it not responsive and keep the menu stay the way it was when resizing the browser window?

    • http://codyhouse.co/ Sebastiano Guerriero

      Yes, just remove the media query >=1170 and all what is inside it. Then add your own style for when viewport is >= 1170px

  • http://www.linkedin.com/in/socoastal/ Justin Urich

    Wondering how difficult it would be to include your Secondary Expandable Menu (http://codyhouse.co/gem/secondary-expandable-navigation/) in this menu? Main menu slides from left, secondary menu slides from right.

  • http://afroniquelyu.com/ afroniquely | shae

    Wow!! Awesome share guys!! Any tips on how we could implement this on a self-hosted WordPress site?

  • Jelo Beltran de Vera

    awesome navigation! but im just wondering why is it the demo are different style when viewing on safari? thanks a lot. maybe you could check it. im planning to implement this on my upcoming project.

    • http://codyhouse.co Claudia Romano

      Hi Jelo, glad you like it! :) I have been checking the demo on safari and it seems ok to me. What do you mean by different style? Thanks!

  • vilavgfx

    Awesome! Quick question. In the mobile view, instead of sliding the entire page to the left, what could I change so that the page stays in place, while the menu slides over, like a layer, while the main page stays in place?

  • idol chan

    Great Mega Menu. It can be more customizable if the style.scss utilize more variables like keeping font-size/height for see-all bar, primary/secondary nav on the _variables.scss. I’m working on it, and will see if i can put it here when done

  • http://wp-labo.tendoo.org/ Afromaster Hervé

    Nice Work. I’m just wondering how to add it a base theme on WordPress

  • Radiks

    Hello! Nice work! Thank you!!!! One question about jquery mobile. What build you use in demo menu? Thank you!

    • http://codyhouse.co Claudia Romano

      Hey Radiks, gad you like it! :) It’s touch events (plus the core functions required by the touch).

      • Radiks

        All right! Thank you for your work! +

  • Tim

    There seems to be a bug with the menu and IE9. The unfolded part looks like it’s 200% in width, the first 100% is not visible and hidden in the left, only the second 100% is visible.

    Edit:
    The issue seems to be with HiDPI displays, not sure if it’s a parallels desktop (my VM software), Windows, IE9 or CSS bug.

  • creativmouse

    How to get the dropdowns on mouse hover instead on click? Is that possible? Thanks!!

    • creativmouse

      Anyone?

      • http://codyhouse.co/ Sebastiano Guerriero

        On click we remove the .is-hidden class from a .cd-secondary-nav element. You can try removing the jQuery that fires the secondary navigation on click, use the CSS selector a:hover + .cd-secondary-nav and add the style to make it visible

  • Talha Ishtiaq

    can anyone please tell me to change the responsiveness of menu.
    i want the same layout even below 1170px width..

    • http://codyhouse.co/ Sebastiano Guerriero

      If you’re using SASS you can modify the breakpoints inside partials > _layout.scss. While if you’re using CSS you can try by using a value < 1170px for the media queries (the result depends by how many items are in your navigation)

  • Luis Ferrreras

    Hey @seguerriero:disqus, would you know what the earliest version of jQuery this nav can still function with ?

    • Luis Ferrreras

      seems to be running well even on 1.7.2 , thats awesome … its a bit outdated but i want to add it onto something and dont want no conflicting libraries

  • http://allvologda.ru Alexey

    Hello, friends!

    Please add a code for automatic generation go-back links in menu.

    Thank you!

  • http://allvologda.ru Alexey

    Hi! How after menu collapsing we can show second level menu from first menu item and show firsts menu levels from others? For example:

    Accessories
    Bottoms
    Jackets
    Tops

    Divider

    Gallery
    Services
    Standard

    Thank you!

  • vilavgfx

    hello @sebastian guerriero, love this tutorial. very handy. had a question about the menu image and the close button in the mobile view. how do I replace the hamburger icon and close icon from pure css to an svg.

    thanks

    • http://codyhouse.co/ Sebastiano Guerriero

      You can add a background-image to .cd-nav-trigger (this way you can use your custom icon). Besides you need to remove the ::before and ::after pseudo-elements that we used to create the icons.

  • http://allvologda.ru Alexey

    Hello, Sebastiano Guerriero and Claudia Romano !

    I have tried this code in ie11. .cd-overlay covers the other layers. May be fix release?

    Happy New Year!

    • http://codyhouse.co Claudia Romano

      Fixed! ;)

      • http://allvologda.ru Alexey

        What are you changed? I have the same issue after clearing the cache :(

      • http://allvologda.ru Alexey

        Hello, Claudia Romano. What are you change? I have the same issue.

  • http://www.chrisrouse.us/ Chris Rouse

    My search icon and menu icon both show the hover text. How do I disable this?

    • http://codyhouse.co/ Sebastiano Guerriero

      If it’s an image replacement problem, make sure the color: transparent; property has been applied to both elements. That should prevent the text from being visible

  • Narendra Mannan

    Amazing stuff! @seguerriero:disqus
    How do I change the nav bar links to shift to center?(Since I want to add some more links in the right top corner) I tried giving margin right but no change, any solution?

    • http://codyhouse.co/ Sebastiano Guerriero

      Try by increasing the right padding of the .cd-primary-nav element

      • Narendra Mannan

        @seguerriero:disqus : Hey thank you so much for replying! It worked, you’re a genius! =D

      • http://www.dalilack.com Molham Bakir

        But increasing the right padding padding:0 150px 0 0 won’t help, as it will only shift the nav more to the left, how we can centre the whole navigation? and the will remain fitting the whole screen?

        • http://codyhouse.co/ Sebastiano Guerriero

          you can give a position: absolute; to the .cd-primary-nav, then add a left: 50% and transform: translateX(-50%) to center it (and remove the padding).

          If you know the size of the navigation, you can give it fixed width plus a margin-left and right: auto;

          This may cause issues with the subnavigation position, you may have to update it’s position as well.

    • Guest

      But increasing the right padding padding:0 150px 0 0 won’t help, as it will only shift the nav more to the left, how we can centre the whole navigation? and the will remain fitting the whole screen?

  • bharathwaaj

    Demo seems broken :(

  • Karol

    Hi Sebastiano, I would like thank you and Claudia Romano so much for your works. There are absolutely amazing!

    If I could ask about little modification. Is there possibility to make this menu non-100%width? I would like to put this menu to container with 1200px width. Is there any solution?

    Thanks for advance,
    Karol

    • Karol

      @seguerriero:disqus, could you please answer me? Thanks for advance!

  • Steven Roberts

    This is fantastic, Thank you.

  • Luca Spanò

    Hi Sebastiano, I’d like to insert a only dropdown menu. How can I code the html? Are there any class that formats the ? Thanks

    • Luca Spanò

      Any advices? thanks

  • Lauriel Mesquita

    I found a bug in Mobile versions (iPhone 6 and iPad iOS 4), to open the search and change the focus to the input, the menu and the search box rolls with the rest of the site if you slide the page. Does anyone have a suggestion to fix it? Now, thanks and congratulations for the post.

  • Arie

    i know the css style isn’t supported in ie8, how about main.js ? just curious about 16px scroll bar will affect window width

  • Abigail Wentzel

    @Sebastiano Guerriero Love this! Thank you for sharing your work! Is there a way to make the secondary nav show on hover (mouseenter) instead of click on desktop view? I can see where the event is in main.js, but I’m not sure how to rewrite it…

  • NoumanArshad

    @Sebastiano Guerriero thanks for sharing such a nice work.its working fine on desktop screens.
    But i have little problem with menu in mobile default browser(android).
    Can you please help me in this regards.

    • gustavoj

      Hi Nouman, what about this problem? could you fix it?

      • Jason Hah

        I encounter the same problem too. Please help.

        • http://codyhouse.co Claudia Romano

          Hi, which version of Android are you using? I’m testing it on 5.1 and it’s working fine.

    • http://www.deos.pl Deos Ełk

      .cd-primary-nav.is-hidden, .cd-primary-nav ul.is-hidden {display: none;}

      it works but disables some animations between menus

  • http://nitnat.de/ nitnat

    Thanks for sharing this awesome work! I wonder why you disabIed the search input focus on mobile? I edited line 103 in the main.js and added a timeout function:

    if($(‘.search’).hasClass(‘is-visible’)) {
    setTimeout(function() { $(‘.search’).find(‘input[type=”search”]’).focus(); },400);
    }

    Works fine for me on mobile too :)

    • Oli

      For me it’s really annoying on my phone when it auto focuses to the search input because my iPhone keyboard shoots up covering half of my screen. I prefer it disabled

      • http://nitnat.de/ nitnat

        that’s what I would expect when I click on a search button

  • Karol

    Maybe someone of you, guys know how to put this menu to container? Is there possibility to make this menu non-100%width? I would like to put this menu to container with 1200px width. Is there any solution?

    Thanks in advance. Cheers.

  • josiahwiebe

    I’m wondering if there’s anyway to exclude a specific div from being moved into the cd-main-content div.

    I’m trying to use it with WordPress and it’s moving my admin bar all over the place.

    • http://codyhouse.co Claudia Romano

      Hi, probably the easiest way is to put that div outside the header and the main element.

      • josiahwiebe

        Yep, got it sorted! Thanks for this tutorial, it was a useful inspiration.

    • Lucas Michailian

      Hi @josiahwiebe:disqus how to implement this menu in wordpress?

      Thanks !

  • Behraang

    Thank you Sebastian, for sharing this awesome work.
    I was wondering if you could tell me, why when i apply dir=”rtl” to html tag, there is an horizontal scroll?
    i solved it by adding overflow: hidden; to body tag, but i just wanted to know the reason.

    Thanks again for your work.

    • http://codyhouse.co Claudia Romano

      Hi Behraang,
      your may try adding an overflow-x: hidden to and . That should remove the scrolling bar.

      • Behraang

        Thanks Claudia, worked perfectly!

  • Greg Bacchus

    Looks awesome, but when I use it on a page that has bootstrap, I get strange behovior with the Search and Menu buttons. When I mouse over them, the words “Search” and “Menu”, respectviely, appear above/behind the buttons. I have checked Chrome debugger and looked through code but can’t figure out why.

    • http://codyhouse.co/ Sebastiano Guerriero

      not sure as we don’t test our resources compatibility with Bootstrap. However simply adding color: transparent; may fix this bug

      • Greg Bacchus

        Thanks, the a:hover color was overriding your .cd-search-trigger, .cd-nav-trigger color. Changing your .cd-search-trigger, .cd-nav-trigger color to transparent !important; fixed it.

  • Mr.Ji

    Good evening.
    I Mr.Ji in Korea.
    I do not speak English well.
    So I used Google translate group.
    Even if you are hard to understand, please understand me.
    I think it’s the file you gave up pretty good.
    So you try to install on my website.
    have confirmed the index file.
    I’ve changed all the url for the css files and js files.
    The Chrome browser will work the layout.
    However, Internet Explorer 9, you have the layout is broken.
    I do not know how I solved the problem.
    I need your help.
    Thanks :)

  • NoumanArshad

    Hi,
    @seguerriero:disqus thanks for sharing such a nice work.Working fine except on Safari browser.
    @claudiarrromano:disqus
    As you can see the attached images the content box is not 100% wide.
    Can you gyus please help me in this regards.

    • http://codyhouse.co Claudia Romano

      Hi, glad you like it! Just tested it on Safari (Mac) and it’s working properly. Are you using Safari on Windows?Please note that Safari for Windows is an outdated browser ( the last update has been released more than 2 years ago).

      • NoumanArshad

        thanks alot

      • NoumanArshad

        i am using Safari on windows and you are right about the outdated version for windows.

  • http://www.dalilack.com Molham Bakir

    when page is loading before DOM is ready, the navigation first load on top then it get placed inside its div, why?

    http://sqmal.com/ac_design/

  • gustavoj

    Hi @Sebastino Guerriero, nice work and thanks for sharing. I have the same problema like @NoumanArshad:….its working fine on desktop screens.
    But i have little problem with menu in mobile default browser(android).
    Can you please help me in this regards.

  • http://www.google.com Umidjon Mamatov

    how to disable right side menu

  • mpmedia

    Verry nice work, thanks a lot!

    The desktop version works fine for me, but unfortunately the menu is not visible on smaller screens, it’s not in the DOM after all. Has anybody had the same issue?
    https://spitest.tocco.ch
    Maybe it’s because I changed the breakpoints, alltough I changed them in both, css and js.

    • mpmedia

      By the way, has somebody already created a LESS file? Otherwise I can contribute that

    • http://codyhouse.co Claudia Romano

      Hi,
      this is way you don’t have a .cd-main-content element in your html document (according to the media queries, the nav is moved inside the header or inserted after the .cd-main-content). In the main.js file (in the function moveNavigation()) try replacing:

      with:

      That should solve your problem.

      • mpmedia

        Hi Claudia,
        I could sort it out. Thank you very much for your help.
        Keep on creating beautiful things like that!

        • Fernando Carlos de Oliveira

          It worked for you with this change?

          • mpmedia

            Yes it has

          • http://www.google.com Umidjon Mamatov

            in main.js change to var MqL = 800;

      • Fernando Carlos de Oliveira

        It did not work for me with this change

  • Dipakkumar Sapkal

    I need desktop menu in mouse over and mobile or tab menu in tech function.

    How to use this plugin.

  • Edoardo Biasini

    What if the overlay’s height is more than the viewport? Can it be made vertically scrollable?

  • Egor Platinoviy

    Hi,
    @Sebastiano Guerriero, @Claudia Romano thanks!
    Good work!

    Please, i need help:
    how swith right side menu in “always”?
    (not drop menu in desktop sizes, only “cd-nav-trigger” icon and right side menu on every display)

    Thanks!
    From Russia with love!

    • http://codyhouse.co Claudia Romano

      Hi Egor, thanks! :)
      To change the resource, you need to remove the style (from the style.css file) we created for bigger devices ( @media only screen and (max-width: 1169px) ) and, in the main.js file, remove this code:

      Give a look at what we did here http://codyhouse.co/gem/secondary-expandable-navigation/

      • Egor Platinoviy

        No work!

  • http://www.tim-holmes.com/ TimHolmesDesign

    Say I click on a selected page within a sub menu and am navigated to said page. Is it possible to when reclicking the menu to open the mobile version of the navigation straight into the sub menu as opposed to top level?

    • jennylu98

      Hello, I’m looking to do the same thing. Do you have a fix?

  • Egor Platinoviy

    Excuse me, but why did you delete my post on the comments?
    http://codyhouse.co/gem/css-mega-site-navigation/#comment-2011084725

  • garfieldlechat

    how’d you make this a sticky nav using the standard sticky class? Cheers

  • Михаил Толстов

    Many thanks for the excellent menu!

    But I had no ease, trying to fix failed.

    If we in the 3rd menu level, a number of points, then appears to scroll, it’s not bad, but this one has to scroll in the second level, and this is not good.

  • Edvard Csanyi

    Hats off! Really great and different!

    I have one question, what should I do to make menu boxed with width 1100px, instead of set left and right in %?
    At the same time child menus should remain the same with full width.

    Thank you again!

    • http://codyhouse.co Claudia Romano

      Hi Edvard, thanks!;)
      You may try wrapping the .cd-nav, .cd-logo and .cd-header-buttons in a div.wrapper with a max-width of 1100px (and a position:relative) and then setting a right/left to 0px for .cd-header-buttons/.cd-logo and changing the padding-right of the .cd-nav. Hope this helps!

    • http://feub.net fabien

      Hi Edvard,
      Did you manage to get the fixed width menu keeping the child menus full width? I want to achieve the same, it is okay for the menu but i cannot keep the submenus full width.
      Thanks

  • Fernando Carlos de Oliveira

    Very good, Congratulations!

    I am now testing the code and have a question. How do I disable responsive mode?

    I do not want the menu change when resize the screen. What should be changed in the CSS for this?

    Thanks.

    • http://codyhouse.co Claudia Romano

      Hi Fernando, glad you like it!
      you can change the media queries value in the style.css (e.g, change 1170px with a smaller value) or in the partials/_layout.scss if you’re using sass.

      • Fernando Carlos de Oliveira

        Hi Marcia, thanks for the feedback.
        I changed all the media querys as they were in 1170 to a very low value to 100, to see if the desktop version of the menu would always be visible, but it did not work.
        I changed to the variable MQL main.js the file, but it worked.
        Can you help me?

        Thanks.

      • Fernando Carlos de Oliveira

        It did not work at changing all the media queries.

        Can you help me, please? :)

  • Raj

    I am now testing the code and have a question mobile screen are not working plz

    check the mobile screen

    • http://codyhouse.co Claudia Romano

      Hi Raj, just tested on mobile and it’s working properly. What kind of issue are you experiencing and on which device/browser? thanks

  • Chris

    Have a test site up where links work in Chrome but don’t work in Firefox. Demo works fine in Firefox. Frustrated. :P

    • http://codyhouse.co Claudia Romano

      Sorry for that!! are there any errors in the console?

  • Musharraf Khan

    Hi !
    First of all thank you very much for this
    i want this menu to b exactly the same on 1024 x 786 resolution as it is on 1280 x 800 resolution

    • http://codyhouse.co Claudia Romano

      Hi Musharraf, glad you like it!
      you can change the media queries value in the style.css (e.g, change 1170px with 1020px) or in the partials/_layout.scss if you’re using sass.

  • http://sweet.ac Ricky

    What is modernizr and Jquery mobile used for inside the proj directory, can i remove them?

    • http://codyhouse.co Claudia Romano

      Hi Ricky, we used modernizr to detect if the device supports javascript, while we used jQuery mobile swipe method to open/close the navigation (mobile version).

      • http://sweet.ac Ricky

        Thanks, great to know.
        Another note, I found myself re-writing most of the JS due to its inefficiency. To beef up codyhouse, you should ‘up’ the level of JS and keep the CSS more cleaner & modular.
        Thanks for the code!

        • Henri van Blarenberghe

          Agree.

          And I would love were you to share your JS.

      • skepticwebby

        I’m using the jquery mobile js. How do I activate the navigation using the mobile swipe method? What swipe gesture do I use, and where? Swiping left right up or down doesn’t seem to work.

  • Pranab Dey

    Nice and Fine design…like it very much
    i’m now at beginner level in sass, so sass is really needed to build this Navigation?

    • http://codyhouse.co Claudia Romano

      Hi Pranab, if you don’t usually work with sass, you can use the style.css file!

      • Pranab Dey

        then can i get the same result with css?

        • http://codyhouse.co Claudia Romano

          yes!

        • Pranab Dey

          @claudiarrromano:disqus can u suggest me some good understandable javascript books for basics..my basics are very weak..

  • Fernando Carlos de Oliveira

    Even changing the media queries of 1170px to a smaller value, the responsive mode not disable How do I leave the desktop version always visible?

    • http://codyhouse.co/ Sebastiano Guerriero

      you should remove the 1170px media queries to override the css (our resources are mobile-first), then clean up the unnecessary code from smaller media queries

      • Fernando Carlos de Oliveira

        Hi Sebastiano.
        I deleted all media queries of 1169px and put the contents of media queries of 1170px direct in css body. Still not worked.

  • Agostinho Mendes

    This is a great mega menu to use with multiple resolutions. This is exactly what I’m
    looking for but I guess that I’ll have an issue. I suppose that I’ll have a lot
    elements on the first level menu and I don’t want to use scroll down
    tab to see everything. I want limit the menu on the screen and user like an
    arrow pointing down to jump for the next 8 or 10 elements. Basically
    I would like to use the same effect that we have to the sub levels menu but to
    split each 8 or 10 elements in different pages. Any solution or suggestion
    to get this featuring working? Many thanks.

  • Swarna

    Thats a brilliant solution.. myself looking for how to make the megamenu work on mouseover instead of clicking on it. any idea?? i see..
    $('.cd-nav-trigger').on('click', function(event){
    have tried to change to mouseenter JS event to get what i want.. but its not working yet!!!
    $('.cd-nav-trigger').on('mouseenter', function(event){

    Also i have multiple galleries with sub categories, so want to show items on mouseover of every subcategory. find the screen exactly what i mean. [for easy understanding check http://www.storypick.com/ mouseover the Entertainment] u see items change based on mouseover the subcategories]

    thanks
    Swarna

    • Lorencius Echo

      Hi Swarna, how can you make a style like that? Myself trying to make the gallery item right beside the list item but I couldn’t because I don’t know what I have to change both on CSS and html code.

  • suan99

    Hi, any suggestion how to make it compatible with ie8? by the way you are making a great work! bye

  • brendan

    Hello, I’m having some trouble implementing an affix style sidebar. Can you think of any reason why a fixed position element inside cd-main-content would only ‘fix’ horizontally and not vertically? Thanks!

    • brendan

      I found the issue, it’s a chrome bug that has a conflict with fixed positioning and the hardware accelerator line (Line 71 styles.scss.) Commenting out lines 71 & 72 fixed the issue for me.

      • skepticwebby

        This sounds related to my issue with YouTube videos not playing full screen in Chrome. Commenting out .cd-main-content, .cd-main-header { /* will-change: transform; */ } solves that problem.

  • http://www.umgsfrontier.com ZIAL

    thank you so much sir Sebastiano for this great work . BTW , how can i position fixed the nav menu when scrolling ? can anyone pls share . thanks

    • http://www.umgsfrontier.com ZIAL

      another follow up question guys , how can i float:left the .cd-primary-nav ? i tried to float in left but it went all in in the left . :(

  • http://www.umgsfrontier.com ZIAL

    hello again people .can i use this in shopify theme ?

  • skepticwebby

    I’ve noticed a glitch in the latest Chrome browser in the latest Mac OS, where embedded YouTube videos won’t play full screen. I hear sound, but don’t see any video. It’s not a Chrome/Flash issue as many websites suggest. I have narrowed the problem down to the code that forces webkit hardware acceleration. I’ve commented out the code responsible for the glitch, which solves the problem, and videos will play full-screen:

    .cd-main-content, .cd-main-header {
    /* Force Hardware Acceleration in WebKit */
    /*
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    */
    }

    .cd-primary-nav a, .cd-primary-nav ul a

    {
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    color: #033131;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #a5c0c1;

    /*
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, opacity;
    */

    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    }

    I also note that Mega-Site Navigation regularly crashes my iPhone 4 and iPod 5th generation. Works flawlessly on iPhone6, with a faster processor.

  • Mitch Thompson

    I plan on loading this menu dynamically from a CMS, which generates normal UL and LI structures, will your script inject the correct classes depending on the depth of the ULs?

  • Diego DAndrea

    Good morning , I would see how to make the menu display only using mouseover on the main options and then disappears mouseout . thanks

  • creativmouse

    Hi! I’m having an issue on my menu. The “dropdown 2″ gets hidden on small screens. Here’s a demo http://codepen.io/anon/pen/jPaKoG is there a way to get it fixed. Thank you!

    • creativmouse

      I’ve found out if I remove .is-hidden from the parent of li.has-children (111st line) it kind of works but then the problem is when I click on Go Back it takes me back to the empty menu with the “< Menu" button on top:

      Go back
      Beanies

  • Olly Yee

    Hi, I’m having a problem where the gallery drop down is positioning to the left off the screen rather than being the full width of the page. Anyone have any ideas why this might be happening?

  • Pram99

    It’s a nice
    mega menu and I am looking to implement the same on one of my sites. But the
    main problem is that when user browses the menu section on mobile devices, #0
    is automatically added to urls. So it is modifying existing url. Suppose my url
    is http://www.example.com/example.php , after browsing
    the menu it becomes http://www.example.com/example.php#0.
    I am afraid if Googlebot indexes it as a duplicate url and affects site search
    ranking. Kindly help.

    • http://codyhouse.co Claudia Romano

      Hi, you may try adding an event.preventDefault for the click event that triggers the #0. That should solve your problem.

  • http://www.html5beginners.com html5beginners

    it awesome mega menu. i learned a lot about mega menu. Thanx

  • Epaudiolive

    First off, love this nav. Quick question: When I have child/grandchild items that require scroll, it forces the scroll on the entire list, even those who don’t need it. Anyway to fix this in the js/css? Thanks again for the kickass nav.

    • blancy

      Yes I noticed this. It’s something I can possibly live with initially, but I am also finding that the vertical scrollbar seems to get left behind once the menu has been operated and closed. I don’t think it is actually left behind as when you try to inspect element on it it just goes to the actual element underneath, but for some reason parts of it remain rendered in the page view. I managed to get rid of mosty of it by adding background colours to the elements beneath the ghost scrollbar, but anywhere there is margin does not get the background colour applied to it and therefore cannot cover up the ghost scrollbar. I’ll reply again if I get anywhere with it

    • Pranav Raghaw

      @Epaudiolive:disqus
      how did you change the scrollbar appearance

  • Mano

    Mega menu not working inside Bootstrap(bootstrap-3.3.5), the menu was working, but the dropdown was showing under the banner… Any one help me plz

  • Bibiana Aguero

    This works only when I preview it from DW to Chrome, but whe I downloaded all the files to my server, it does not work. I don’t know why. My site uses the navigation bar at http://www.bibianart.com/index.html

    • Epaudiolive

      Looks like the JS files are referencing your desktop, not the server::

  • http://www.scriptedpixels.co.uk Kam Banwait

    How does this work on IE8?

  • Olly Yee

    Menu is awesome! However i’m having trouble positioning the nav within the center of my header? Has anyone tried this and has a really easy solution…?

    • http://codyhouse.co Claudia Romano

      Hi Olly, you may try removing the float: left from the ul#cd-primary-nav (and it’s children ), add a text-align: center to the ul and a diplay: inline-block to its children . Hope this helps!

      • darkgr33n

        I was looking for the same and this works for me, thanks!

  • darkgr33n

    Thanks for the menu – in fact, I really appreciate all of the nuggets you serve up so thank you for everything ;) I’m using the menu in a current project, however, I wonder if its possible that when the cd-secondary-nav become visible, that it doesn’t obscure the cd-main-content div, but instead forces it down the page in a similar way to this site: http://www.ybs.co.uk/index.html. Because its absolutely positioned I understand that it is removed from flow of the document. I have tried position: relative in a few place but just wonder if its possible please ?

  • http://michaelwoodruff.com/ Michael Woodruff

    This is great stuff. Obviously this code relies a lot on transitions and transforms. Is there a good resource you recommend to get primer on them. I know you leverage bourbon to handle this, but I’d like get the basics of the standard CSS first. I have found a lot of resources, but was curious what you “cut your teeth” on to start leveraging these somewhat new CSS methods. Thanks for your time.

    • http://michaelwoodruff.com/ Michael Woodruff

      Also, after further reading I am wondering if I should bypass CSS Transitions/Transforms altogether and use VelocityJS. Any thoughts on why you you made your choice? I see you have used VelocityJS on other projects. Again, thanks for your time.

  • http://www.wallfa.com Hasan Movahed

    thank you

  • bewoldt

    I’m having issue on my iphone 5s where if you have a large enough number of items in the first level menu and it makes the offscreen menu taller than the height of the viewport the site won’t scroll. Can anyone else verify this?

    • Carina

      I had the same issue, in the css file,

      .cd-primary-nav, .cd-primary-nav ul

      you need have

      overflow-y:auto;
      overflow-x: hidden;

  • http://webhost.pro/ Charles Yarbrough

    I get a huge blank space under it before I click anything, any ideas how to get rid of that? You can see it here http://infinityhost.net Thanks, trying to figure this out now.

  • blancy

    Just spent a while integrating this into a project I’m working on. Looked great in chrome but when I checked in Firefox just before showing the client I noticed extra unwanted horizontal scrollbars in the mobile nav as you dive down. Checked the demo site and it’s the same there too. Gutted :(

    Is this a known issue?

    • Astra Sleepz

      Easy. do this:

      overflow-x : hidden

      • blancy

        Thanking you :)

  • Anna Isabel

    Thanks for this amazing navigation! I integrated it in my project and it works great! However, the jQuery resize () seems to cause flickering of screen and of the tags when I inspect elements. I tried to set a timeout but it did not change. Is this a known issue? Any suggestions?

  • Ivan

    Is it possible to change the push down effect so it becomes push up, so both the menu and content move down?

  • Thien Alex

    i’m hover event but mouver over not shows

    my code:

    $(‘.has-children’).children(‘a’).hover(

    function () {

    var selected = $(this);

    if (selected.next(‘ul’).hasClass(‘is-hidden’)) {

    // desktop version only

    selected.addClass(‘selected’).next(‘ul’).removeClass(‘is-hidden’).end().parent(‘.has-children’).parent(‘ul’).addClass(‘moves-out’);

    selected.parent(‘.has-children’).siblings(‘.has-children’).children(‘ul’).addClass(‘is-hidden’).end().children(‘a’).removeClass(‘selected’);

    $(‘.cd-overlay’).addClass(‘is-visible’);

    }

    },

    function () {

    var selected = $(this);

    selected.removeClass(‘selected’).next(‘ul’).addClass(‘is-hidden’).end().parent(‘.has-children’).parent(‘ul’).removeClass(‘moves-out’);

    $(‘.cd-overlay’).removeClass(‘is-visible’);

    });

    • Hasan Ansari

      I am facing the same issue when try to visible the second level menu
      on hover of root level menu. I have used the same java script code but it was
      not working as per requirement.

      Instead of java script code I have used CSS property to visible second
      level menus on hover of root level menu as below (Figure #1)and remove
      ‘is-hidden ’ class from second level ‘ul’ tag (Figure #2) for desktop view
      only.

      Figure #1:
      .cd-primary-nav{

      display:none;

      }
      .cd-primary-nav > li:hover ul.cd-secondary-nav{
      display:block;
      }

      Figure #2:

      On document.ready function I have again
      add ‘is-hidden’ class in second level ‘ul’ tag by using JQuery code when
      browser size is less than or equal to 1170px (width()<=1170) for mobile view
      as below Figure #3.

      Figure #3:
      $('.cd-secondary-nav').addClass('is-hidden');

      Now, it is working for me.

      • Alexandre

        hi ! i don’t understand why do you hide ‘cd-primary-nav’ with display:none (figure #1) ? My menu is no longer visible so i can’t hover it.

        • Alexandre

          Thank you

        • Hasan Ansari

          hi Alex ! thank u for ur response. it should be ‘cd-secondary-nav’ with ‘display:none’ in (figure #1) instead of ‘cd-primary-nav’. it was a typing mistake.

      • Amol Mohite

        Hi,
        Thanks for this solution,
        But i am using same code but mouse hover over not shows
        please give me some solution.

        please reply me…

  • Anya

    This is fantastic, and I really want to use this nav, however the attached is a screen grab of what the demo is looking like in my Firefox (41.0.2) browser. I’ve refreshed the page, and nada. What’s up with the pointer background images? (No such issues in IE or Chrome.) Thanks much to anyone who can offer a suggestion.

    • http://rwmd.net/ Roger

      I just tried it in FF 41.0.2 on my WIN7 box and did not experience the same issue :/

      Perhaps delete cache…

    • col des

      remove from css [or a least comment out]
      will-change: transform, opacity;

      will-change is not fully supported – CodyHouse* [should] know better – yes it would be great if we all lived in a Chrome browser world [and we should]

      *don’t get me wrong, I love all of CodyHouse’s work

      Also some other css tweaks
      .cd-primary-nav .cd-secondary-nav a {background: #fff; /* ff fix */}
      .cd-primary-nav .cd-secondary-nav ul ul {/* tertiary navigation */background: #fff; /* ff fix */}
      .cd-primary-nav ul.is-hidden {padding-left: 1px; /* fix for IE */}

      • Anya

        Hey, thank you very much for this. I haven’t begun experimenting with this yet but really appreciate your suggestions and will give them a go. Thanks for taking the time here!

  • Fani Puspitasari

    Hi, This is a great mega menu I Like It
    But I’m having some trouble on my menu, this is not work on IE9
    Any suggestion how to make it compatible with IE9?Thank you

  • Edwin

    I use compass for sass. your have a bourbon import. how can I make it compatible with compass?

  • Stephen Warren

    Can you have a mix of gallery, text and imagetext in one ? so say three columns of text then an image in the fourth?

  • Alexandre

    I would like to open the menu on hover, someone would have a solution? With CSS or JS regardless.

    Thank you

  • Hasan Ansari

    In the mobile view, On second level navigation menu (ul.cd-secondary-nav) I have one element called “Human Resource” which has sub menus as well as site url itself.
    Is there any way when element has url and user click on the menu name it will redirect to respective url. on click of right arrow it popup the sub menus.
    Please find the sreen shot for your easy reference. Thanks in advance.

  • jack holden

    what code would i have to change for it to just show the mobile menu. Any help is much appreciated!

  • Peter Luy

    How do I make it so it will just show the desktop version? I lowered the 1170 to a smaller number but that just removes the content of the menu on mobile/small window screens

  • aerosmesh

    Great menu, thanks for sharing!!!

    How can i Set the menu to autocollapse or hide it once i click on any link?… Currently , the MegaMenu it remains open when i click on it .. Thanks in advance

  • TimHolmesDesign

    OK, say I have clicked a menu on a link via the mobile menu which happens to be in a second sub tier. Is is possible to re open the menu at the second sub tier depending on what page you are on so it shows the active page in the menu.

  • Reedner

    We have a problem running this menu on the iphone 6:

    Once we click the menu button it starts loading but not opening it and after like 3 seconds there comes a browser message saying: The website was reloaded because there was an error…

    What is this?

  • Pranab Dey

    @claudiarrromano:disqus can u suggest me some good understandable javascript books for basics..my basics are very weak..

  • ash

    drop down issues with ie8. jquery object not found error. Any solutions are welcomed :D

  • samad aghaei

    Why the tag is out of its place?
    There is a problem with Semantic HTML Markup and Standard coding principle.

  • Pranav Raghaw

    If I try to add anything, for example any form or image, it hides behind
    the grey region. how to add my elements in front , or how to move the
    menu behind part behind.

  • Amol Mohite

    Hi,
    It’s great work, and thanks for sharing….

    I would like to open the menu on hover, someone would have a solution?
    please share with us..

    Thanks agin…

  • col des

    Anybody have a fix for the top level nav [desktop] using latest Firefox on WIN10 where the “V” rotated to “X” does not display correctly? Works OK on MAC

  • Levi Johansen

    having a hard time implementing this in WordPress. Has anyone done it?

  • Stephen

    Has anyone implemented a back end for this? Considering paying a developer to have this done in Yii.

  • Kiara Aliano

    Hi there,

    I have centered my nav but now my secondary nav looks like this and i cant figure out how to fix it… could anyone please help me?

  • matthias

    hi everybody,

    i adapted the wonderful mega-site-navigation for a client-project but ran into problems two weeks ago because i want the whole navigation centered at around 1024px … and the mega-menu not only centered with that width but the white space around it streched to the left and right browserframe.

    to better illustrate it: this is the result i already achieved (first image).

    to get there i integrated another ul/li-element around the actual navigation (second image) which caused many troubles. the worst: the nice mobile navigation isn’t working any more (third image).

    after several different attempts i created a completely new approach without adding any elements to the original mega-menu-navigation but instead tried to master the problem with dynamic margins for the drop-down-menu:

    padding: 48px -moz-calc((100vw – 1024px) / 2);
    padding: 48px -webkit-calc((100vw – 1024px) / 2);
    padding: 48px calc((100vw – 1024px) / 2)

    and i am able to the the primary-menu centered and the logo and search integrated but the drop-down-menu is still attached to the right side of the primary and therefor pushed towards the left.

    has anyone found a good/smooth way to center the whole navigation including the pull-down streched over the whole width like in the first image?

    thank you very much for your help,

    matthias