Code

Discussion on Zetta Menu - CSS3 Mega Menu and Drop Down menu

_nK

_nK does not currently provide support for this item.

46 comments found.

Hi,

I want to intigrate this script into my upcoming html template. Its a bootstrap based template.
1. How easy it would be to integrate into bootstrap 3.2 template?
2. Since it has it’s own grid, will it be interfering with bootstrap’s main grid?

Thanks -chandan

Hello.

1. Just use it according to instructions and include zetta menu css file after boootstrap. Menu will work correctly and will not affect the bootstrap.
2. zetta grid does not affect the grid bootstrap.

Best regards, nK

Hi,

I seem to have run into some issues with the responsive version. Can you please have a look at this: http://isotopethemes.com/extenso/header-issue.html

The responsive version behaves quite strangely, creates a horizontal scroll-bar on mobile devices, how do I solve this?

Hello.
This is due to the fact that each drop down menu has 50 pixels of left margin.

Best regards, nK.

Sorry to trouble you again but I found a big bug with full width dropdown menu, please have a look here : https://www.youtube.com/watch?v=VqJ_nLnW_gM&feature=youtu.be
Full width dropdowns overlap and kinda jump from one section to other. Here’s the link: http://isotopethemes.com/extenso/dropdown-issue.html

Thanks, Chandan

Hello, Chandan.
I found in your file theme.css this code:
.nav-container-1 ul.zetta-menu li{
    transition:         all 300ms ease;
    -moz-transition:    all 300ms ease;
    -webkit-transition: all 300ms ease;
    -o-transition:      all 300ms ease;
    -ms-transition:     all 300ms ease;
}
There is a conflict, and so the menu does not disappear immediately.
You can use selector
.nav-container-1 ul.zetta-menu li > a
Best regards, nK

I deleted that line but the bug is still there (http://isotopethemes.com/extenso/css/theme.css)

Looked again the menu. You add transitions in file zetta-menu.css into this selectors:
.zetta-menu ul,
.zetta-menu div.zm-multi-column {
It turns out that they also cause conflict and the menu does not hide any longer.
Also, for the current drop menu was higher than the previous drop menu, code must be supplemented. Please find next:
.zetta-menu.zm-effect-slide-right li > ul {
  display: block !important;
And ?omplete the following:
z-index: 1;
Find next:
.zetta-menu.zm-effect-slide-right li:hover > ul {
  visibility: visible;
And ?omplete the following:
z-index: 2;
I think this should help. Thanks for your comments.

what about the characters of Turkish ??ÜÖÇ???ü…

What is the problem?
Please, send me your site address or html of your site, using this form.

will you answer here?

Answer sent on your email.

Hi nKdev,

I had increased the height of first level li elements. Where to set the new position for second level ul elements for ideal distance? The second level menu is covering the menu elements at moment. At: .zetta-menu > li > ul { top: 100%;} ? Thanks! schischo

Hello, schischo.
Yes, you can change .zetta-menu > li > ul { top: 100%;}
For example if height of 1st level items = 80px, change ‘top: 100%’ to ‘top: 80px’.
If you want to indent more than the height menu item (for example 90px), you will have to supplement the code (I can help with this).
Best regards, nK.

Hi! I am still very happy with the zetta menu. I’m currenty working on performance improvement. I found that having instances is not recommended and that using them results in a lower score for your site’s code. I am using zetta menu with icons and the icons work with the tag. Is it possible to replace the italic code with for example a span tag?

Hello, igerards.
Thank you for kind words!
Yes, you can use span with no problems. The documentation FontAwesome is used by default <i> tag, but <span> works just as well.

Best regards, nK.

Hi,

I’m having trouble getting the ‘bottom’ menu to display at the bottom of the screen, which part of the CSS must I modify?

Thanks

Hi, gallegosmarco.

You need to add classname zm-position-bottom to main menu &ltul>
If you want the menu was always on the display bottom, just add classname zm-fixed.

Best regards, nK.

I need to use Zetta Menu for the RTL direction, what I need to do? Any Help??

Hi, raedweb.

Thank you for purchase Zetta. You can set this styles:

.zetta-menu {
  direction: rtl;
}
But zetta is not optimized for RTL. If you have any requests, please write in support system – http://nk.ticksy.com/ or on email from form in my profile – http://codecanyon.net/user/nKdev#contact

Best regards, nK.

I need urgent Help, The menu not working on Nokia and Blackberry Mobiles you can check it:http://conferences.uaeu.ac.ae/demo/

Answered in support system.

Awesome work! Clean code, many options, beautiful design, and very easy to integrate into an existing project on top of that! My 2 cents: hamburger icon is broken if we don’t use the fontawesome library. I think you should either explain how to use a local image instead, or add a specific class: content: url(../images/design/myicon.png);

Hi, wssltd.

Thank you! Maybe in next update will be changed hamburger button (will be onclick action and changed icon to css realization).

Best regards, nK.

Presale question: I would like the css version of your menu to stick to the top of the page, is it possible to do it with something like this? position: fixed; top: 0px;

Thanks.

Hi, Bound79.

Yes, you can set menu fixed, just add classname .zm-fixed to main <ul> tag.

Best regards, nK.

1. On mobile your demo menus continue to try and take me to your front page site when I’m only trying to scroll your menu.

2. if the menu is at the top of the screen, there is no way to close the menu without clicking the home button. (You can’t click the sub-menu button that you are currently viewing to close it.

Seems like for a portable menu, it has bugs running in mobile chrome. You should fix these issues.

Hi, Gutspiller.
Yes, I know about these issues. And do not change anything, because this will lead to incompatibility of the current menu to users. It will be necessary to change not only CSS, but HTML markup.
Best regards, nK.

Hi, I purchased your code in September how do you align the text right, so that the search bar is on the right also. I have done this myself but when i hover over the search button all the text moves to the left. I do have a 1px solid hover on the search button. When i remove full-width and hover over the search button none of the text moves left it works fine.

Hi, phoenixlight74.

Can you show me the page with issue?
You can use this support system – https://nk.ticksy.com
Or this contact form – http://codecanyon.net/user/_nk#contact

Best regards, nK.

Hi, how can we add a tittle when the menu is in responsive accordion + switch. Right now i only see the hamburger icon on the right but no tittle, i will like to put MENU as tittle and for it to only show on responsive.

Little custom code will help you.
https://nk.ticksy.com/

When creating a sub menu , there are 2 options: Content or Sub Menu. Is there any way we can make a mix? It will be great if we select content and it allow us to add items.

This is also possible with custom code. You can add all you want inside content section. So, I think, this is possible.

Hi, I have problems with long menu. When I choose an item, the drop down list is longer than the height of the page and i can use/read some links that are not visible. Is it possible mangage the overflow with a scroll bar? thank you!

Hi.

This is possible. But if you want to use sub-sub menus it will be broken.

Best regards, nK.

This menu is useless nowadays, it does not work on mobile devices. I purchased the product but then realized that it does not perform well on any mobile phone. Once you open a menu you can’t close it ever again.

This isn’t bug, this is pure CSS realization with :hover state. I planned to change it to checkbox usage, but no have time for Zetta Menu. Sorry.

Please do as soon as you can. I purchased this menu for an urgent project and now I am left like a fish out of water.

In this weekend’s I’ll make changes and zetta will be updated. Thank you for use it.

Hello,

I am interested in your menu watch the demo, not seen possible to have the menu with the position: relative? or an element the site simply moves from its normal position, The menu moves thank you

You can’t scroll page? See here – http://a.nkdev.info/zettaMenu/zm-relative.mov

Hello, here is an example, look here http://www.gayweeks.com/ scroll-down Top Navbar fixed / Panel Then Scrollingg How to convert normal drop-down menus in the horizontal bar at the top panel while scrolling.

thank you

You can use JS to add/remove classname .zm-fixed while scrolling.
Or create another one menu and show it when scroll down, using JS.
This is customizations, that I will not provide, you should write it yourself.
For example you can use 3rd party plugin to sticky menu – http://stickyjs.com/

Submenus don’t work in Windows Phone. For instance, mobil phone with this SO can’t open the “Drop Right” submenu in this website: http://cc.nkdev.info/zettaMenu/

Hi, hansifels.

I don’t have any WP device to test it, but you can try add this attribute on <li> tags: aria-haspopup="true"

Great, it works!

You can’t close submenu clicking again in any device, you need to close the menu or choice another option

This is limitation of CSS. In jQuery Zetta you can toggle submenus by clicking on items.

Thanks, I’ll do it with a small javascript

by
by
by
by
by
by