Pixelworkshop supports this item


This author's response time can be up to 2 business days.

20 comments found.

Nice menu, congrats!

Very sweet…:) do you have any plans of the responsive version?

Thanks ! Not yet for the responsive version…

As always, great work. Keep ‘em coming!

Thanks ! I have a few updates to finish before starting something else :)

Hello, have a presales Q. Is there a way to implement this menu into wordpress ?

Thanks in advance,, Stromrad

Hello ! I guess that it should be first converted into a plugin so you could use it from the backend. It’s not the only way to do that but I’m not enough experienced with Wordpress to give you any further pointer…

Hello, thank you for quick respond!

Best regards, Stromrad

is there a way to put my own html div instead of the “Large_icons” format ?

Hello, you also have the ‘HTML content’ element that shows you something else than list items, just simple DIVs.

Hi, Nice Code. Can i use an conatiner div with two column list in html contents. Plz reply asap

Hello, for that you’d have to set your own columns. If you hover over HTML Content in the example pages, you’ll see that you can put here any kind of content, including columns.

Works great for me on a desktop. Should it also work on a mobile browser or ipad tablet? Thanks.

Hello, I guess that it would require a few adjustments : the content may not fit into the screen, for example on an iphone. A set of media queries could be set to resize / place all the elements so they are all visible / accessible.

Also this menu works exclusively on mouse hover, an equivalent on tablet like one touch to open and one another to close would need a little additionnal script.

In short, this hasn’t been coded or optimized for mobile devices. It can be done with some customizations.

Hi, First, I want to say it’s a very nice menu. I’m having problem with this menu when the page is directed from right to left (dir=’rtl’). It makes lot of empty space at the left of the page. How can I fix this problem? Thanks.

EDIT: Never mind, I think I fixed it. Thanks again :)

Hi again,
Sorry for bothering you, but I screwed it again :P
It worked at the begging, but now it showed up again, I don’t know why.
By the way, you cad add (dir=’rtl’) to the demo, and the exact problem will appears, so I don’t think the problem is from my code
Help please

Ok I see ! That’s because the drop downs are not really hidden from the page (for better SEO), and if you look at the CSS, you’ll find this : left:-9999em;. And that causes the empty space.

With some quick modifications, I could reverse that and it seems all good. You can try this in the CSS :

Replace left:-9999em; by right:-9999em; at the line 135.

Add the code right:auto; after the line opacity:1; at the lines 160, 165 and 174 (don’t erase the opacity value, just add the property there).

And you should be good, in my files it doesn’t render well because my texts are LTR but I guess that you already adapted the content :)

Thanks :)
It worked perfectly.

Nice work but it will have responsive version or not? Thank you!

Hello, well for now it’s not in my plans to make it responsive. It’s not very easy without javascript and for now I prefer to stick to a 100% CSS menu.

Hi The vertical menu looks awesome. Does it work with Prestashop? If so how easy to integrate? Thanks.

Hello, unfortunately I have no idea, I’ve never worked with Prestashop…

Amazing work, just bought this and it’s saved me a lot of time and effort! Keep up the amazing work!

Great, thanks for your comment :)

Hi, First i must say Great Menu!

I have some questions.

Is there any way to add an OnClick function to the drop down button instead of it being hover?

If it’s not possible with this CSS only version could you make a jQuery version and i will buy it right now?

This menu seems to be exactly like the amazon menu except that it does not offer the speed of their menu so is there a way you could make it as blazing fast as theirs?

Again thanks for making such a great menu.

Hello and thanks for your feedback !

Yes that’s possible by adding a custom script, but because CSS and javascript are separated categories on Codecanyon, I should not add a script to this menu. Making a JS version would be like a duplicate product so it should be a brand new menu instead…

I’m a bit busy with other projects but I should rethink this all if I plan an update :)

Ok thanks,

I have another question: I want the menu to pop out full with of the body of my site without enlarging the size of the button.

What css do I have to edit to make it pop out like that? If you need an example take a look at eBay’s pop out menu by their logo.

I don’t want it to display sub categories on hover I would like to display the sub-categories under their parent category’s.

I have tried to make the pop out the size of the body of my site but when I do it also makes the button the full width of my site body. I don’t want the size of the button to change only the drop down.

Hello, well it’s a bit complicated, there are quite a few parts of the code to customize. It seems that the ebay menu has a fixed width set in pixels and with this menu you can’t use percentages (so it would take automatically the whole width).

Unless you want to go for deep customizations, I can suggest you to set your own width in pixels.

This is a very nice vertical navigation system. I have a tewnty eleven theme. how do I incorporate it into wordpres? How do i convert it into a plugin? Thanks

Well, it’s not a simple question that I can’t answer in a comment. If you’re not experienced with creating WP plugins, then you should hire someone who would do it for you.

Please help I want to adjust the hover drop down in the iphone / ipad from hover conver to onclick I have tried but not been Look forward to help.

While I do provide support, I don’t create custom scripts on demand. I’ve considered updating this menu to make it fully responsive but I’m a bit too busy for now.

<script type=”text/javascript”> $(document).ready(function() { if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { $(”.megamenu li ul”).click(function(){});}}); </script> I tried this way but not the outcome, I’m bored.

This is the very beginning of a script, your function is empty and if you take into account only ipads and iphones you’ll miss all the other mobile devices. It’s much better (in my opinion) if you base your script on a plugin like this one for example.

how can we set the menu to show open on homepage and colapsed in the rest of the pages? thanks

So in this case you’d need 2 versions of this menu, one for the home page and another one for your other pages. It depends on your site structure and how you built it so I can’t be more precise…

can you tell me please if this menu support 3 columns on the flyout? the links should be shown one under the other to fill in the first column, than fill second column the same way.

No this is not an option available, you can have multiple sublevels but not several columns within a single flyout. That should be possible by customizing the CSS.

Wish it was responsive and support Bootstrap

Well, maybe in a future update but it’s not in my plans for now…


Thank you for your great job one of the best, but i have a question can we divide the menu of li>ul>li in case if we have many items so if its possible to make it two section. i wish if you didnt got my idea that send me your email to show it to you more clearly what exactly i am looking for.

Best regards, Mohamad Simo

Hello, the best solution is probably to add a different class to each item and style them individually in the CSS. For example the HTML markup would look like :

<a href="#" class="customclass">All Categories</a>

And the CSS :

.megamenu_container .megamenu .customclass:hover {
    color: #cc0000;

customclass is meant to illustrate that you can create as many classes as you want and simply add your colors in the CSS by following the same pattern.

Amazing its work, thank you so much for you support and you wonderful product :-)

You’re welcome, and thanks for using my work :)

hello. when can we expect a responsive version? it’s been 1 year till the initial request, others have requested and in the end more and more websites are responsive these days. thanks

Well, I wouldn’t want to rely on Bootstrap even if it’s a great tool, and it involves javascript again. Actually there are a few possible approaches but as I have to stick to 100% CSS, it makes things quite limited (and I don’t want to use any CSS hacky things into this menu). But thanks for the suggestion, I appreciate.

how can we collapse the expanded menu if we click on PRODUCTS? thanks

This menu is 100% based on CSS so if you need to handle click events, you’ll need a custom script.


How many navigation levels does the menue support?

Thanks and kind regards André

Hello ! There is no limitation in terms of levels, you can nest menus as much as you want :)