JQuery Mega Menu Widget
[resolved] Problem with generated CSS for class="sub-container non-mega& (9 posts)

  1. Gawain Lynch
    Posted 4 years ago #

    I'm having a problem where the second level menus get further away from the top level alignment, as you go left to right.

    For example, the first top-level menu item's submenu looks like:
    <div class="sub-container non-mega" style="left: 0px; top: 42px; z-index: 1000; ">

    The second top-level menu items's submenu (note that "left:124px"):
    <div class="sub-container non-mega" style="left: 124px; top: 42px; z-index: 1000; ">

    Finally, the third top-level menu items's submenu (note that "left:228px"):
    <div class="sub-container non-mega" style="left: 228px; top: 42px; z-index: 1000; ">

    Any ideas?


  2. remix4
    Plugin Author

    Posted 4 years ago #


    The sub-menu position positions itself so its centered on the parent menu item. You can choose the full width option if you want the sub-menu to expand across the entire menu width

  3. b-summers
    Posted 3 years ago #

    I am having this same issue. Gawain, did you ever find a solution?

    I find it works fine, until you either change the font, or the font size, then it get's all wacky. Which is kind of stupid if you ask me. I do not want my sub menu the entire width of the menu.

  4. Gawain Lynch
    Posted 3 years ago #

    No, I just used another menu... I gave up a couple of days later as I was able to drop in another plugin that worked out of the box (albeit not as sexy as this one).

  5. b-summers
    Posted 3 years ago #

    What was it called just out of curiosity?

    I ended up just overriding the element style in css for each one individually. A really shitty fix, but it's all I could come up with for now

    #dc_jqmegamenu_widget-2 #menu-item-207 div.sub-container[style]{
    left: 45px !important;
  6. new7
    Posted 3 years ago #

    You can open the .css file in the plugin folder and find the line:
    #dc_jqmegamenu_widget-%ID%-item ul li .sub-container

    add to margin-left: -3px !important so it looks like
    margin-left: -3px !important;

    Visit http://thecornerstone.de to see it working

  7. webbnos
    Posted 3 years ago #

    Hi folks.

    I'm having the same problem and getting really frustrated to the point where I just want to give up, which would be a shame as the rest of the site is going ok (my first custom WordPress theme created using the Starkers framework).

    Basically, I have the same trouble - the dropdown menus are 301px to the right of the parent item. I can't find this value anywhere in the css so assume its being applied by the js. Has anyone else managed to get this working? I've tried b-summers and new7's suggestions but I can't get either to work.

    Thank you in advance.

  8. webbnos
    Posted 3 years ago #

    Hi all.

    Just in case anyone finds this thread whilst having the same problem - I worked it out to be a reset in the style.css (I started the project using the starkers theme).

    The reset in question was this part;

    li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
    .group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
    body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
    ::-moz-selection 	{ background:#ff0; color:#333; }
    ::selection 		{ background:#ff0; color:#333; }

    In my case it was li {postion:relative;} that was causing my menu not to display where it should. I used /* */ to remove it. (I'm new to this so i tend to remove parts of code using /* */ so I can see what I've done!

    Hope this helps other folk.

  9. slyguy67
    Posted 3 years ago #

    @webbnos - Thank you! This was my issue too.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • JQuery Mega Menu Widget
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.