Thank you for that info, so I went into the structure.css file, and removed line in question. Still no gold.. Im thinking my theme might possibly be kaiboshing the whole process, just cant find where..
Thanks for the great plug in. I need to make my Product link stay on the same page the user is on e.g not go to the products page.
The structure is the same as below.
Products –> Category –> Product Ranges
Really excited to have this menu up-and working on my website. I’m having the same problem i’ve seen a few people have, my sub-menus are not appearing below main menu.
I have tried looking up any overflow:hidden and as far as I can tell there is no z-index for my templates, so I saw someone else mention to put one into the plug-in myself. any idea if thats the issue?
Thanks Lee. Your suggestion gets me a good way there, but there’s a limit to how wide I can make width of #dc_jqmegamenu_widget-3-item ul.menu.
I’d like to force the right align condition even where the submenu is wider than the total menu. Hence I’m wondering if there is a line in the javascript code where I can add additional pixels to widen the total menu width when determining whether to left or right align the subcontainer?
Hi Mark – the menu works by first checking the center point of the parent item relative to the menu container. If the available px on the right is not sufficient the menu will adjust so that its right-aligned. If the menu then overlaps the left boundary it will ultimately left align against the left side of the menu container (i.e. the parent element that has position: relative; – which is the ul tag).
The problem is that the sub-menu is wider than the total menu width so its defaulting to left align. You can compensate by increasing the width of #dc_jqmegamenu_widget-3-item ul.menu
Hi Lee – I am really impressed by Your plugins! – really easy, and userfriendly handling.
I am sorry but I have 2 new question :
1. Is it possible to have both the mega menu and the Floating menu one page – I have tried it but it doesnt seem to work?: for me: http://risbjerg.in/mega-menu-test/
2. I cant get the mega menu to work if I embed it in a page – same link as above?
I checked the link and the floating menu isnt on the page – has a menu been allocated in the widget control panel?
For the mega menus the problem is because the container holding the menu has overflow-y set to hidden so the drop down sub-menus wont appear – remove the overflow rule from the theme’s style sheet – line 1748
I’m able to get the menu to appear, and I can click the primary nav items and access the corresponding pages, but the sub-nav pages do not appear in a drop-down menu (even though there are arrows next to the primary nav items, indicating sub-nav items). I tried adding the wp_footer() function to my functions.php file, but no luck. Any ideas?
Im a complete novice. Is there any chance you can give me step by step instructions on how to successfully add your script for use in a wordpress site. I am struggling ot get the script lined up. Essentially if I can do this, then I can include the html menu structure with the PHP generated links..(and hopefully some logic).
Hi Lee – really cool plugin – I have voted for Your plugins on wordpress.org – I have 2 question for You:
1. How do I add the menu on the header or on top of my header -( something??)
2. How do I add those cool car photoes on my menu?
If you look to the left of my menu at http://www.tramsmail.se you will see a bullet (not in IE) and I’ve tried putting “list-style-image: none;list-style-position: none;list-style-type: none;” on every UL in stylesheet, but it won’t disappear. Can you please help me?
Thanks Lee! Now you’ve saved me twice today! The contact form has been “working” for a few minutes now so I don’t know if tht went through but my email is nicole (at) creativenicole . com.
This menu rocks! Thanks so much. I don’t know if you can help me with this, but I started with the grey.css file and then modified as needed. I haven’t touched the files for days, or done any updates, and all of a sudden, it reverted back to the original CSS, so all my custom styling is gone. I KNOW I should have saved this on my machine (lesson learned) but any idea why this may have happened or if there is anything I can do to retrieve it? Looking at another 2-3 hours of repeat work if not :/
Hi Nicole – all wordpress plugin files are deleted when updated so any custom styling needs to be kept with the theme files. Not sure if its possible to recover the files from the server …. however …. are you the one who posted on the Wordpress site earlier about the style sheet problem? If so, I have a copy of your earlier CSS file from when I tested it. Send me an email and I will send a copy of the file
Hello , I would like to be able to insert links within the menu that are dynamically generated, as opposed to the fixed wordpresss menus (which do my head in). I can write the code for the dynamic urls, but I cant figure out how to modify the widget menu link son the fly.. Basicaly I want to inset my own links into the menu, without using the wordpress menu as a basis. Any idea?
Hi Jonathan – are you generating the links using PHP or jQuery? if the former then it would be easier to create the menu and then instead of using the Wordpress plugin version just use the jQuery mega menu plugin to generate the menu on the final HTML list
Is there a way to still get this menu to work if users have their javascript turned off? Many sites default to a css dropdown when javascript is not on. It would be nice if this plugin could as well.
Hi Candi – the jQuery plugin can be modified so that it uses javascript to hide the sub-menus as opposed to CSS, in which case the menu would just default to a standard HTML list if javascript is disabled. This is why we initially developed mega menus without the usual additional tags you see on other examples. It would appear to slow down the menu forming but hopefully not too much
I got some problem with the sub-menu, when I expands my sub-menu, it’s cover by sidebar. Meant sidebar on the top but sub-menu behind it (IE8 only, FireFox no problem)
Hi Jeff. The problem will be with the z-index. Check your theme files to see where the sidebar has any z-index settings. If you can delete them completely then even better.
The reactions are the same with all the settings. The menu becomes transparent it comes in the cache of Safari, looking at a new page, and works ok again as you refresh the page.
A little precision brought by a correspondant : the problem with Safari appears only at the second type the megamenu is seen. First pages are ok. F5 or new page causes the menu to become transparent…
Hi Pierre – unfortunately I dont have access to Safari to check it out. I havent heard of other similar problems, although if other have it would be good to know.
Will see if I can find anything obvious online about Safari that may cause the problem.
Do you get the same problem using both the click and hover events as well as the fade or slide? At least may help pin down which part of the plugin may be causing it
Great plugin. But I have some problems with Safari users. They say to me that borders and background of the menu items arent appearing at all.
You can see the result in our new “in progress” website at http://maquette.crdp-strasbourg.fr/nouv_crdp
Ref: “Do you mean adding more custom menus in the menu admin page or assigning menus to the drop down widget?”
I was facing prob with assigning more menus to widget area. I can add more menu in admin area but could not assign them all to Menu Widget – may be some limitation..is it..?
And another issue i have with IE7 – pls check the url: tint.dk
I’m attempting to use megamenu as my top navigation bar. it works great for the most part, but on IE7 it’s being hidden underneath my Featured Articles Lite slideshow, as well as a secondary menu directly under it.
My code is basically
–overall container div–
–div with megamenu in it–
–container div with low z-index and relative position, float right, but the 2 inner divs show over the menu anyway–
–content div that properly is hidden by megamenu—
—ect—
Is there any advice you can give me to make this work properly in ie7?
Though I managed to work it out. After further searching I came across a simple solution that did the trick.
All you need to do is apply different z-index values and set position to relative for the containers of the menu and the content. For me it looks like this:
td#header {
position:relative;
z-index:1121;
}
td#middle {
position:relative;
z-index:1111;
}
I noticed that the menu sometimes behaves oddly in Opera 11.10.
I solved some issues through setting the height of the sub menu and a tags to auto, aswell as commenting out the left-margin css in jquery.dcmegamenu.1.3.2.js. But still sometimes the sub menus all have zero as left values and some also loose their bg.
Perhaps it’s conflicting with something, i’ll experiment on and see.
I only have one problem. In the site i’m working on i have Cufon for headlines etc and galleries that use z-index for stacking images.
As usual all is well in all browsers except IE, in which the menu appears below the Cufon and galleries, even though at least the galleries have lower z-index values than the menu.
Do you have any idea why this might be?
I’d prefer not to post the URL, but can e-mail it to you if that might help..?!
But since I’m on the subject of skins…I created a brand new skin called “KC” with a stylesheet called kc.css. Is there a way to prevent the new stylesheet from being overwritten? Perhaps add some code to tell the plugin to search an alternate directory for additional skin templates? As it stands now, I have two choices – either upload the new css skin every time the client upgrades the plugin, or choose an existing skin and override the styling in the theme’s child-template style.css.
Thanks!
Lori
Hi Lori – any custom skin needs to be added to the theme style sheet files. Unfortunately Wordpress basically deletes/overides plugin folder when updating so any changes made directly to plugin files would be overwritten
Ahh Lee,
Thank you for that info, so I went into the structure.css file, and removed line in question. Still no gold.. Im thinking my theme might possibly be kaiboshing the whole process, just cant find where..
Lucas – there are 2 parent div tags for the menu, which both have overflow: hidden hardcoded into the HTML.
1st one class=”builder-module-outer-wrapper builder-module-widget-bar-outer-wrapper”
2nd one class=”builder-module-block-outer-wrapper builder-module-sidebar-outer-wrapper single clearfix”
Hi Lee,
Thanks for the great plug in. I need to make my Product link stay on the same page the user is on e.g not go to the products page.
The structure is the same as below.
Products –> Category –> Product Ranges
Is this possible?
Cheers
Hi Rob – In the wordpress menu admin just remove the link URL for the “Product” menu item and replace with “#”
Hey Lee!
Really excited to have this menu up-and working on my website. I’m having the same problem i’ve seen a few people have, my sub-menus are not appearing below main menu.
I have tried looking up any overflow:hidden and as far as I can tell there is no z-index for my templates, so I saw someone else mention to put one into the plug-in myself. any idea if thats the issue?
Hi Lucas – there is an overflow: hidden on the div tag wrapping the menu – line 126 of structure.css in your theme files:
.builder-module-widget-bar .widget-wrapper {
float: left;
overflow: hidden;
}
That’s great.
Thanks Lee. Your suggestion gets me a good way there, but there’s a limit to how wide I can make width of #dc_jqmegamenu_widget-3-item ul.menu.
I’d like to force the right align condition even where the submenu is wider than the total menu. Hence I’m wondering if there is a line in the javascript code where I can add additional pixels to widen the total menu width when determining whether to left or right align the subcontainer?
Starting line 145 is where is decides how to align the menu. You can change the if else statement so that it always uses right align
Hi Lee
Is there any way to keep the sub container from extending off the page?
Ive got a 3×2 subcontainer for a main menu item that sits on the right hand side of the main nav bar.
When the subcontainer drops down, the far right part of the subcontainer is not visible – however scrollbars appear.
Ideally it would be great if the subcontainer could be centred relative to its parent item.
Hi Mark – the menu works by first checking the center point of the parent item relative to the menu container. If the available px on the right is not sufficient the menu will adjust so that its right-aligned. If the menu then overlaps the left boundary it will ultimately left align against the left side of the menu container (i.e. the parent element that has position: relative; – which is the ul tag).
The problem is that the sub-menu is wider than the total menu width so its defaulting to left align. You can compensate by increasing the width of #dc_jqmegamenu_widget-3-item ul.menu
Hi Lee… your plugin rocks!! Congratulations… but i have a question..
Is it possible to add a list of links for posts to the menu, after the categories & subcategories, like a new third level?
Thanks Lee
Hi Alex – you can add additional links via the Wordpress custom menu in admin – Appearance –> Menus
If there isnt a system available for creating them automatically you can add custom links.
Hi Lee,
Thank you for your solution
I just add the z-index for the skin of jquery-mega-menu because my theme can’t found any z-index. The problem has been solved
Hi Lee – I am really impressed by Your plugins! – really easy, and userfriendly handling.
:
I am sorry but I have 2 new question
1. Is it possible to have both the mega menu and the Floating menu one page – I have tried it but it doesnt seem to work?: for me: http://risbjerg.in/mega-menu-test/
2. I cant get the mega menu to work if I embed it in a page – same link as above?
Hi – yes both menus can be run on the same page.
I checked the link and the floating menu isnt on the page – has a menu been allocated in the widget control panel?
For the mega menus the problem is because the container holding the menu has overflow-y set to hidden so the drop down sub-menus wont appear – remove the overflow rule from the theme’s style sheet – line 1748
Hi Lee,
I’m able to get the menu to appear, and I can click the primary nav items and access the corresponding pages, but the sub-nav pages do not appear in a drop-down menu (even though there are arrows next to the primary nav items, indicating sub-nav items). I tried adding the wp_footer() function to my functions.php file, but no luck. Any ideas?
Thanks,
Duncan
Hi Duncan – apologies – the comment went into spam. Do you have a link I can take a look at?
HI Lee,
I have tried unsuccessfully to enqueue your scripts through the
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
function.
Im a complete novice. Is there any chance you can give me step by step instructions on how to successfully add your script for use in a wordpress site. I am struggling ot get the script lined up. Essentially if I can do this, then I can include the html menu structure with the PHP generated links..(and hopefully some logic).
Thanks for your help
Hi Lee – really cool plugin – I have voted for Your plugins on wordpress.org – I have 2 question for You:
1. How do I add the menu on the header or on top of my header -( something??)
2. How do I add those cool car photoes on my menu?
risbjerg.in
Hi – to add the plugin to the header you need to create a widget in the header area. See our earlier post – Wordpress Tutorial – Adding A Widget Area To Your Theme Files for more info.
To customise the CSS and add background images to get the car menu you can check out out our Wordpress Tutorial – Create Your own Custom Mega Menu Styles
Hi,
If you look to the left of my menu at http://www.tramsmail.se you will see a bullet (not in IE) and I’ve tried putting “list-style-image: none;list-style-position: none;list-style-type: none;” on every UL in stylesheet, but it won’t disappear. Can you please help me?
/Raffe
Hi Raffe – do you mean the arrow bullet?
Thanks Lee! Now you’ve saved me twice today! The contact form has been “working” for a few minutes now so I don’t know if tht went through but my email is nicole (at) creativenicole . com.
Nicole – have sent the CSS file
This menu rocks! Thanks so much. I don’t know if you can help me with this, but I started with the grey.css file and then modified as needed. I haven’t touched the files for days, or done any updates, and all of a sudden, it reverted back to the original CSS, so all my custom styling is gone. I KNOW I should have saved this on my machine (lesson learned) but any idea why this may have happened or if there is anything I can do to retrieve it? Looking at another 2-3 hours of repeat work if not :/
Hi Nicole – all wordpress plugin files are deleted when updated so any custom styling needs to be kept with the theme files. Not sure if its possible to recover the files from the server …. however …. are you the one who posted on the Wordpress site earlier about the style sheet problem? If so, I have a copy of your earlier CSS file from when I tested it. Send me an email and I will send a copy of the file
Hey there, I rarely comment but I had a super complex menu structure, short development time span. I snapped this little puppy in like BUTTAH !!
Thank you for offering not only a nice plugin, but all the set up steps and just making it a hassle-free breeze.
Leif
Hi Leif – thanks for the comment and glad the plugin worked well
Hello , I would like to be able to insert links within the menu that are dynamically generated, as opposed to the fixed wordpresss menus (which do my head in). I can write the code for the dynamic urls, but I cant figure out how to modify the widget menu link son the fly.. Basicaly I want to inset my own links into the menu, without using the wordpress menu as a basis. Any idea?
Hi Jonathan – are you generating the links using PHP or jQuery? if the former then it would be easier to create the menu and then instead of using the Wordpress plugin version just use the jQuery mega menu plugin to generate the menu on the final HTML list
Hi,
What will be the code please to do this manually?
Thanks
Hi Mars – if you go to the jQuery plugin project pages for the menu it explains how to use the plugin if you want to use on a non-Wordpress site:
http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/
Is there a way to still get this menu to work if users have their javascript turned off? Many sites default to a css dropdown when javascript is not on. It would be nice if this plugin could as well.
Hi Candi – the jQuery plugin can be modified so that it uses javascript to hide the sub-menus as opposed to CSS, in which case the menu would just default to a standard HTML list if javascript is disabled. This is why we initially developed mega menus without the usual additional tags you see on other examples. It would appear to slow down the menu forming but hopefully not too much
Hi,
I got some problem with the sub-menu, when I expands my sub-menu, it’s cover by sidebar. Meant sidebar on the top but sub-menu behind it (IE8 only, FireFox no problem)
Hope can get your help
Thank you
Hi Jeff. The problem will be with the z-index. Check your theme files to see where the sidebar has any z-index settings. If you can delete them completely then even better.
The reactions are the same with all the settings. The menu becomes transparent it comes in the cache of Safari, looking at a new page, and works ok again as you refresh the page.
And thanks a lot for your rapid answer.
A little precision brought by a correspondant : the problem with Safari appears only at the second type the megamenu is seen. First pages are ok. F5 or new page causes the menu to become transparent…
Hi Pierre – unfortunately I dont have access to Safari to check it out. I havent heard of other similar problems, although if other have it would be good to know.
Will see if I can find anything obvious online about Safari that may cause the problem.
Do you get the same problem using both the click and hover events as well as the fade or slide? At least may help pin down which part of the plugin may be causing it
Hello Lee
Great plugin. But I have some problems with Safari users. They say to me that borders and background of the menu items arent appearing at all.
You can see the result in our new “in progress” website at http://maquette.crdp-strasbourg.fr/nouv_crdp
Thanks a lot
HI Lee,
I am very much impressed with your great work and support.
I have read all the comments for hours and tried all the tricks you told but i could not fix. Any help pls.
Ref: “Do you mean adding more custom menus in the menu admin page or assigning menus to the drop down widget?”
I was facing prob with assigning more menus to widget area. I can add more menu in admin area but could not assign them all to Menu Widget – may be some limitation..is it..?
And another issue i have with IE7 – pls check the url: tint.dk
Any suggestion would be a great help.
Hi Lee
I fixed it thnaks for such a nice plugin
Thanks again
Devender – glad its now working
Hi Lee
I configured this plugin but can not see sub navigation. can you please help ?
site is here http://gc.trinetrafocus.asia/ red skin.
Thnaks in advance
Ah, I fixed it!
The #dc_jqmegamenu_widget-%ID%-item ul, #dc_jqmegamenu_widget-%ID%-item ul, #dc_jqmegamenu_widget-%ID%-item ul li
on line 2 of the megamenu stylesheet needed a high z-index.
Hi Evan – glad you managed to solve the problem
I’m attempting to use megamenu as my top navigation bar. it works great for the most part, but on IE7 it’s being hidden underneath my Featured Articles Lite slideshow, as well as a secondary menu directly under it.
My code is basically
–overall container div–
–div with megamenu in it–
–container div with low z-index and relative position, float right, but the 2 inner divs show over the menu anyway–
–content div that properly is hidden by megamenu—
—ect—
Is there any advice you can give me to make this work properly in ie7?
Thanks so much in advance,
Evan
Thanks Lee!
Though I managed to work it out. After further searching I came across a simple solution that did the trick.
All you need to do is apply different z-index values and set position to relative for the containers of the menu and the content. For me it looks like this:
td#header {
position:relative;
z-index:1121;
}
td#middle {
position:relative;
z-index:1111;
}
I noticed that the menu sometimes behaves oddly in Opera 11.10.
I solved some issues through setting the height of the sub menu and a tags to auto, aswell as commenting out the left-margin css in jquery.dcmegamenu.1.3.2.js. But still sometimes the sub menus all have zero as left values and some also loose their bg.
Perhaps it’s conflicting with something, i’ll experiment on and see.
Thanks again!
Hi Dag – Thanks for the info. Will take a look at Opera also
Hi and thanks for a great plugin!
I only have one problem. In the site i’m working on i have Cufon for headlines etc and galleries that use z-index for stacking images.
As usual all is well in all browsers except IE, in which the menu appears below the Cufon and galleries, even though at least the galleries have lower z-index values than the menu.
Do you have any idea why this might be?
I’d prefer not to post the URL, but can e-mail it to you if that might help..?!
Thanks again!
Hi Dag – If you can email me the link I will take a look
Yeah…bummer
. Thanks for an awesome plugin by the way….this is an easy one to set up
Lori
But since I’m on the subject of skins…I created a brand new skin called “KC” with a stylesheet called kc.css. Is there a way to prevent the new stylesheet from being overwritten? Perhaps add some code to tell the plugin to search an alternate directory for additional skin templates? As it stands now, I have two choices – either upload the new css skin every time the client upgrades the plugin, or choose an existing skin and override the styling in the theme’s child-template style.css.
Thanks!
Lori
Hi Lori – any custom skin needs to be added to the theme style sheet files. Unfortunately Wordpress basically deletes/overides plugin folder when updating so any changes made directly to plugin files would be overwritten