Support » Plugin: JQuery Mega Menu Widget » Dropdown doesn't work

Viewing 15 replies - 1 through 15 (of 22 total)
  • Plugin Author remix4



    Check that your theme’s footer.php file contains the wp_footer function

    I am having the same problem, I made the widget area in my header, pasted the code at the right spot and placed the plugin in the widget area, everything’s fine except the menu won’t open anymore! I have checked and I do have the wp_footer function.


    Capucinegaudry, bon jour. I went to your website, and I don’t see any submenus whatsoever. I just see Emil’s responsive theme. Have you constructed your own menu in your WordPress admin >> Appearance >> Menus?

    Yes I have, It worked just fine (opened with the sub menu pages) before I changed to the mega menu plugin (in wich I put my own main-menu wich I constructed myself in the menus page). And that’s exactly my problem, the sub-menu don’t show anymore!!!

    When you create a widget area and put the jquery mega menu in that widget area … Where it says Select Menu: … the navigational menu you created in WP Admin >> Appearance >> Menus should be selected from the drop-down box.

    And you’re saying it is selected?

    When I look at your html output, I see NO submenus anywhere. If you created submenus, are they set up properly? Is it 2 or 3 levels deep?

    Here’s a screenshot of part of a menu I use on one site that has the plugin:
    Menu Example

    That results in what you see on that site:

    Thank you so much for your kindness in the efforts in trying to help me with this!!!
    I do have 2 levels in my custom made menu (looks exactly like your screenshot) backend_my_menu
    Mabe this screen shot can help figure out if something is in the wrong place.
    btw Your Mega menu is exactly what I was looking to do… I so much want to figure this out!!!
    P.S. I want to congratulate you on taking a stand for what is right (or against all the bu****it that’s going on) we need more people like you in the world!

    Ah yeah… This is the widget page where I filled in the stuff:

    The menus in your widgets and appearance >> menus are different. In appearance >> menus you’re calling on the menu titled mega. In your widgets, you’ve implemented the menu titled Main_menu. These should be the same — one or the other. If you’d like to use the menu you posted as a screenshot, then change mega to Main_menu in appearance >> menus >> header menu dropdown box >> Main_menu.

    If you’re not using a skin — and it appears that you’re not — go into your file

    Erase all of this (just copy and paste it into Notepad, so you have a copy of it):

    .dcjq-mega-menu ul, .dcjq-mega-menu ul li {list-style: none;}
    .dcjq-mega-menu {position: relative; padding: 0; margin: 0;}
    .dcjq-mega-menu ul li ul {display: none;}
    .dcjq-mega-menu .sub {display: none;}
    .dcjq-mega-menu .sub ul {display: block;}

    And replace all of that with this:

    /* Reset code to remove theme inherent styling */
    .dcjq-mega-menu ul, .dcjq-mega-menu li {
    list-style: none;
    padding: 0;
    margin: 0;
    .dcjq-mega-menu ul {
    display: none; /* Hides non-mega links */
    .dcjq-mega-menu .sub ul {
    display: block; /* overrides above hide */

    /* Main menu styles */
    .dcjq-mega-menu {
    background: #222 url(skins/images/bg_white.png) repeat-x 0 -80px;
    width: 100%;
    height: 40px;
    border-right: 1px solid #1B1B1B;
    border-left: 1px solid #1B1B1B;
    position: relative; /* Important – required for positioning of mega menu */
    font: normal 13px Arial, sans-serif;
    line-height: 16px;
    .dcjq-mega-menu li {
    float: left;
    font-weight: bold;
    .dcjq-mega-menu li a {
    float: left;
    display: block;
    padding: 12px 25px;
    background: url(skins/images/bg_white.png) repeat-x 100% 0;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    text-decoration: none;
    .dcjq-mega-menu li.mega-hover a, .dcjq-mega-menu li a:hover {
    background-position: 100% -40px;
    color: #000;
    text-shadow: none;

    /* Arrow tag for parent links */
    .dcjq-mega-menu li a.dc-mega {
    padding-right: 38px; /* Additional padding for arrow */
    position: relative; /* Required for arrow positioning */
    .dcjq-mega-menu li a .dc-mega-icon {
    display: block;
    position: absolute;
    top: 18px;
    right: 15px;
    width: 8px;
    height: 6px;
    background: url(images/arrow.png) no-repeat 0 0;
    .dcjq-mega-menu li.mega-hover a .dc-mega-icon {
    background-position: 0 100%;

    /* Mega Menu Styling */
    /* Mega Drop Down Container */
    .dcjq-mega-menu li .sub-container {
    position: absolute; /* Required */
    background: url(images/bg_sub_left.png) no-repeat 0 100%;
    padding-left: 10px;
    margin-left: -3px;
    .dcjq-mega-menu li .sub {
    background: url(images/bg_sub.png) no-repeat 100% 100%;
    padding: 20px 20px 20px 10px;
    .dcjq-mega-menu li .sub-container.mega .sub {
    padding: 20px 10px 0 0;
    .dcjq-mega-menu li .sub .row { /* Clear the sub-menu floats */
    width: 100%;
    overflow: hidden;
    clear: both;
    .dcjq-mega-menu li .sub li {
    float: none;
    font-size: 1em;
    font-weight: bold;
    /* Sub-menu Headers */
    .dcjq-mega-menu li .sub li.mega-hdr { /* Sub-menu headers – i.e. 2nd level navigation */
    float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
    width: 260px;
    margin: 0 10px 20px 10px;
    border: 1px solid #ccc;
    .dcjq-mega-menu li .sub a { /* Clear the styles from the top-level links and set the font styles */
    background: none;
    border: none;
    text-shadow: none;
    color: #111;
    padding: 7px 10px;
    display: block;
    float: none;
    text-decoration: none;
    font-size: 0.9em;
    .dcjq-mega-menu li .sub li.mega-hdr a.mega-hdr-a {
    padding: 7px 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
    font-weight: bold;
    color: #000;
    background: #EAEAEA url(images/bg_hdr.png) repeat-x center center;
    .dcjq-mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
    color: #000;
    text-shadow: none;

    /* Add the individual sub-menu backgrounds */
    .dcjq-mega-menu li .sub li#menu-item-105 {
    background: url(images/video-insprantes.jpg) no-repeat 135px 50px;
    .dcjq-mega-menu li .sub li#menu-item-106 {
    background: url(images/video-equitherapie.jpg) no-repeat 135px 50px;
    .dcjq-mega-menu li .sub li#menu-item-110 {
    background: url(images/sante-equine.jpg) no-repeat 135px 50px;
    .dcjq-mega-menu li .sub li#menu-item-111 {
    background: url(images/alimentation.jpg) no-repeat 135px 50px;
    .dcjq-mega-menu li .sub li#menu-item-99 {
    background: url(images/references.jpg) no-repeat 135px 50px;

    /* Style the 3rd level links */
    .dcjq-mega-menu li .sub li ul li {
    margin-right: 90px;
    .dcjq-mega-menu .sub li.mega-hdr li a {
    color: #444;
    font-weight: normal;
    padding: 3px 0 3px 25px;
    background: url(images/bullet.png) no-repeat 10px 8px;
    .dcjq-mega-menu .sub li.mega-hdr li a:hover {
    color: #990000;
    background-image: url(images/bullet_on.png);

    /* Styling for items with only 2 levels */
    .dcjq-mega-menu li .sub-container.non-mega .sub {
    padding: 20px 20px 20px 10px;
    .dcjq-mega-menu li .sub-container.non-mega li {
    width: 190px; /* Set the drop down width */
    .dcjq-mega-menu li .sub-container.non-mega li a {
    padding: 7px 5px 7px 22px;
    background: url(images/bullet.png) no-repeat 5px 12px;
    .dcjq-mega-menu li .sub-container.non-mega li a:hover {
    color: #990000;
    background-image: url(images/bullet_on.png);


    1. Ensure that bullet.png, bullet_on.png, bg_hdr.png, bg_sub.png, and arrow.png are all in that folder. If they’re not, then grab ’em from the skins/images/ folder and copy and paste ’em into that folder.
    2. Make images that are a certain width and height (I just used 135 x 50 in this example). Upload them to your mega-menu/images folder — the same folder where bullet.png, bullet_on.png, etc., are.
    3. I just put in pictures … what you might want to use. For example, for your Video Insprantes submenu, I put a picture in there, video-insprantes.jpg … so make a .jpg picture that is 135 x 50 (or change the dimensions in this file) and upload it to the /images/ directory … if you want pictures.
    4. Note the menu numbers. Video Insprantes is 105. To determine where you want the pictures, just view your page source. When you right click, view page source, look for your menu html output. There, it will give you the number corresponding with your menu. That’s how I knew it was 105. Everyone’s is different. So if you wanted a picture for Contact, you’d use menu-item-97 … if you wanted a picture for Accueil, you’d use menu-item-181.

    You can better reach me on Facebook if you’re there …. … and if worst comes to worst, just make me a temporary wp-admin login and I’ll put the custom .css in there myself. I know this sounds like a lot of work, but it should only take you 5-10 minutes, depending on how quickly you make the images. Hope you get things working; once you understand it, it’s quite simple to work with!


    Also, funny … I’m from Detroit, but lived in St. Foy, Quebec (outside of Quebec city) for 3 months (hockey), and have played many times in Montreal, and a few times in Trois Riveres. I still own a Mario Lemieux poster that a store owner in Quebec City gave me when I was a kid … I asked if I could buy it, and he just gave it to me — I’ll never forget it! It’s in my basement wall and I’ll never get rid of it!

    I also played college hockey, and a few of the guys on the team were from various parts in Quebec (and Newfoundland — Newfies, Nova Scotia, Ontario, Saks, Alberta, etc.) … there were only 3 or 4 of us Americans! But I still email PC Drouin, Vinnie Auger, Ryan Hughes, and many other friends from college who moved back to Quebec.

    Awsom menu!!..
    Cant get it work though.. 🙁
    Would be so great to have the same kind of menu that u’re showing.
    But what am I doing wrong or what am I missing?

    Can you help me out?
    For a client I’m making a side:
    Look under menu jakarta..

    Would realy appriciate any help…thnks a lot!

    Page is empty, Rene66 … can’t see anything.

    ja is know..:-(
    just messed up my db while trying to make a widget..cnt figure how to do that aswell..

    In a minute my db will be restored..;-) (I hope)

    Never had this before!
    Guess I have a problem now.
    Will back up tomorrow..(2am here)

    thnks again..

    Okay, Rene … you don’t even have the plugin activated … so it’s impossible to see what’s wrong.

    I’m recovering the site.. :-(.
    Will let you know when I get stuck (again).
    Would love to have the same kind of menu that you have on your site

    Great job!

    Let you know more..

    btw: sent you friends request (Alias: nasigoreng);-)

    Everytime when I install the plugin, my site crashes.
    Any idea’s how to prevent this issue?

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Dropdown doesn't work’ is closed to new replies.