Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #19852

    Sorry to create a new post guys, I know you have a lot of work on your hands, so I will try and keep it easy.

    The menu at the top overlaps the logo when you have a lot of menu items (Like our Library does) so I modded the menu to be only 500px wide, it looks great, 2 rows of menu items, however drop down items on the first line no longer work. I assume is has to do with the Z-Index value (seeing as menu is 100). I tried to move Menu to z-index 1 (still shows nicely) but the Menu still doesn’t work. Any idea how to make it go OVER the second line of text?



    Add this on your custom.css

    .sub-menu {
    z-index: 9999 !important;




    Doesn’t seem to have worked. The drop down menu still shows up underneath the second line of the menu and when you go to click it, it disappears the second your mouse runs over anything in the second line of the menu.



    Anyone been able to figure this out? The changing of the z-index did not solve the issue.


    Could it do with the javascript for the avia menu?



    I have a feeling it has to do with the first LI element in the sub menu. If you mouse over the the main menu and get the drop down, when you try and mouse over the first element it disappears. However if you mouse over the main menu, use your mouse’s scroll wheel to go down one notch, the menu stays, and you can select the other items, except for the first, which closes the menu.


    Hi matthewkoster,

    I’m not having that issue at all when I visit the test site. I see that the menu is 482px wide with the current items in it and that on a smaller screen size there is a bit of overlap on the home button and the logo since its so wide however.

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .main_menu {top: 89%; right: 17%;}

    That moves the menu down and just about center when on the tablet/laptop size screens.




    No I had to mod the test site. The width of Main-Menu has to be 500 which turns the menu into 2 lines.

    First line shows “Home | About Us | News | Library | Computer Services”

    Second line: “Financial Literacy | Events | Room Rentals | Support Us”

    When I click About Us, a drop down of sub pages appears, but it goers UNDER Financial Literacy, making it almost impossible to click the menu item under about us. Changing the Z-Index of SubMenu did nothing.



    Try to add following code to css/custom.css (probably it will not work with the quick css field):

    #top .main_menu .menu li{
    z-index: -1;

    .main_menu .menu ul.sub-menu{
    top: 15px;

    Best regards,



    The Menu still disappears the second the mouse rolls over a link in the second line. Theoretically those codes should work, but for what ever reason they are not. I still cannot click on anything in the “About” drop down because the second the mouse hits “Financial Literacy” it wants to click it instead of whats on the drop down…


    Hi matthewkoster,

    I tried out a number of things and messing with the z-index on them but I don’t know what its not taking effect. The only other option I can see would be to put all items that will have dropdowns on the second row so that the issue doesn’t come up.




    Unfortunately that’s not an option for us, when the site is complete almost every link will be a drop down. Is there any way to accomplish this? The project cannot be presented to the Exec. Director while its non functional. Is there a way to create a new menu that works?


    I’ve tagged Peter and Kriesi to see if they can take a look. I assume its a matter of one of the menu items css cascading down to still effect the underlying menu item even when the hover is active but the menu was never coded to work with multiple lines where that would be happening.




    here we go, its actually not that hard once you think a little about it ;D

    SInce we need to apply the high z-Index only to the menu that is currently open we can simply use the :hover selector like this:

    .main_menu li:hover, .main_menu li:hover ul {
    z-index: 9999 !important;

    That should do the trick :)

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Dropdown does not work properly when menu is 2 lines’ is closed to new replies.