stoise does not currently provide support for this item.

14 comments found.

looks great. can it be done in such a way that mouseover on childmenu item would open up the grandchild menu item?

i have a limited space for a huge list of menu

Actually in the first iteration of the menu I included the support for the option, but in the end I decided to remove it and just keep it a mega menu due to simplicity. Shoot me an email at and I’ll get you the appropriate code.

Hey there, I decided to roll that update out to everyone, It’s currently in the queue to be approved, but once it is you should get a notification. The file with the appropriate code will be under examples as “02_non_mega_menu.”

The version will be 1.01.

Thanks again for your purchase!

Hi, do you know how I’d add a search area in the mobile navigation, similar to ? Thanks!

This is kind of a tricky situation.

The first step you would have to do is to remove the search, the logo, and the cart from the unordered list. Typically it’s not valid html to jump from a <ul> straight into a <div> without wrapping it in an <li> first.

Based on what I viewed, the desired output is:
fixed width logo fluid menu fixed-width search/cart

I would create a div before wrapping the logo, and a div after wrapping the search and the cart. You’ll want to set a fixed with for both of these elements.

You’ll then want to apply a padding-left and a padding-right to the <ul> equal to the width of both of the elements you just created. You’ll also want to set the box-sizing of the <ul> fluid menu to border box. I included a mixin for this so you just have to add .borderbox(); This is so we can still have the menu span 100% of the window as well as having a fixed width padding.

Now, you’ll want to set the position: relative on #main-nav, and set position: absolute on the fixed width elements we made above, with the logo set to left:0 and the search wrapper set to right:0;

There are multiple approaches to accomplish this, so if it doesn’t satisfy what you’re after please let me know!

Hi, stoise. Thanks again for the insight. I think it worked. Do you know why I cant get the nav to stay fixed atop the page? please see ... Thanks in advance!

you would want to do this:

nav#main-nav{ position: fixed; top: 0; width: 100%; }


I want to reduce the menu width to 700 px. Which part of the CSS can I change? Let me know.


There is a LESS.css variable at the top where you can define the width of the menu, it looks like this: @full-menu-width: 976px;

You’ll want to set that variable to 700px then recompile the stylesheet.

I’ve looked within the provided examples but cannot see a basic css file and html page. If there is not one, you could really do with an example file that contains only the menu and menu related css styling. After all, it’s a menu that is being sold and not a complete web page layout. Thanks and just a minor gripe to an otherwise excellent menu.

If you open up /documentation/quickstart.html there is a startup guide on extracting the necessary code to implement into your website.

In order to keep the menu easily customizable based on the menu item count and the width of the menu, It’s hard to make it a simple “plug and play” where these variables need to be set and compiled per instance (or not compiled if you want to run the LESS engine on the front end).

I could have created a page that only had the CSS and the HTML necessary to get the example menu into a specific website, but there are too many different menu structures to consider and that one solution wouldn’t be relevant to the majority of the purchasers.

On that note, if there are any concerns or you need any help implementing it, don’t hesitate to ask. I’ll be more than willing to help.

Great code. I would like the background to be transparent? Where do I find that in the code?

If you open up main.less and navigate to lines 50-56, that is where the colors are being applied to the menu. If you would like the entire menu to be transparent, you can just replace the @menu-color variable with an RGBA value instead of a hex value.

Alternatively you could also apply a transparent PNG as a replacement.

You will need to recompile the style-sheet afterwards.

Let me know how it works out!

Thank you.

No problem! Thanks for purchasing

Hi, I can’t get my shop button to work in IE. Can you tell me whats wrong?


I just checked it in ie7-9 and it appears to be visually working. I did notice that the “href” attribute of the link is still pointing at ”#” instead of a relative URL.

Could that perhaps be the issue?


I need your help. The script of “Back Button” doesn’t work on my iPhone (iOS7). Can you tell me what’s wrong?

Many thanks.

Surprisingly! I re-checked it and there’s nothing wrong as you said.

Anyway, I have another problem on mobile view again ( When I click the menu button and then came across to double tap on the content section on the right hand side, it can be zoomed in and out on both Android and iOS. Moreover, I can pan left and right. But it doesn’t happen on your test page.

This happened after removing the overflow:hidden of #content-wrap. If I didn’t remove it, some of contents will be concealed.

Could you please tell me the solution to fix it?

Thank you.

Good news! I already found the solution to fix that.


Hey there,

Sorry about the delayed response I was out of town for the holidays. Glad you got everything working, it’s looking great! If you have any more questions don’t hesitate to ask, I’ll respond more promptly now.


Hi. I can’t compile your .less file. Even on the examples. It doesn’t like the MediaQueries, apparently, such as:

@media only screen and (min-width: @menu-break-point){



I have tried compiling with SimpLESS, Crunch, and the LESS compiler app itself. Any thoughts? My SimpLESS won’t compile in anything but 1.3.0, and there are newer versions. What am I doing wrong? Please help. :) (PS, I am new to .less).

It is happening right out of the box with the example files.

That much said, I did figure out what seemed to be the problem. It was that line, but it was the return in it. In other words, this crashed the compile:

@media only screen <HARD RETURN HERE-- code canyon isn't showing it> and (min-width: @menu-break-point){


But this did not.

@media only screen and (min-width: @menu-break-point){ }

This I figured out after having tried Koala, SimLess, CodeKit, Crunch, and other compilers. All doing the same thing when it got to that line. I should have checked that earlier, but I was stuck on the idea that it was the @media query.

There were a couple places that was happening.

Also, there was an issue with one of the math things in the .less file. When I would compile, 640px – 1px did not return 639px; it returned a string of ‘640px – 1px’

So, I had to write a work-around for that.

But, overall, the menu is great. Hopefully my experience above can help others if they end up having the same problem.

Much appreciative for the response, it seems that with the versions of the compilers changing, its hard to actually maintain a solid codebase. I’ve recently moved onto writing my code in SASS now so I haven’t actively been using this menu nearly as much as I have been.

I do know that twitter has jumped onto the LESS trend, and wrote their latest bootstrap in it.

Did you perhaps attempt to compile it using RECESS ( )? Twitter released their own compiler. I’d like to see if it is as sensitive to these discrepancies as some of the other compilers.


Glad to share my feedback. I understand what you’re saying with the updates to the compilers and keeping up with the changes.

I didn’t try using RECESS. All the compilers I used, too, were local GUI-style compilers, not command line or server.


It seems to me that when I include your IE Conditional comments, they are forcing IE9 to render in IE8 document mode.

Can you tell me why?

Those ie conditional comments were pulled from the html5 boilerplate. I do believe the conditional classes are being used but not necessarily the rendering engine one, so you could extract that piece if it is conflicting with your project.

You can read about it here:

Let me know If that answers your question.

This menu is really well done. Well thought out. Good Work!

Great menu, Kevin!

However, I’m having trouble getting the child back button to work in iOS. Specifically, iPhone 5c and iPad Air.

I’ve emailed a picture and the css and js files to you.

Any suggestions would be appreciated.

Thanks very much in advance!


This is from a silly bug, its because the anchor element doesn’t have the cursor property.

You can globally assign this by doing this:

a{ cursor: pointer; }

You can also specificly apply it to just the menu item as well.

hi, if i delete anything inside the menu drop down menu are not show fully, because of the height has reduce, is it necessary to have , bacause if i delete it, the drop down menu not show properly, tq

look good. GLWS!