Dropdown does not work properly when menu is 2 lines « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Incarnation

not a support question

Dropdown does not work properly when menu is 2 lines

15 posts from 5 voices

Started 4 months ago by matthewkoster
Latest reply from Kriesi
This topic is not a support question

Tags:

No tags yet.

matthewkoster
Member

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?

test.atwaterlibrary.ca

Posted 4 months ago #
Ismael
Moderator
Hi,

Add this on your custom.css
```
.sub-menu {
z-index: 9999 !important;
}
```
Regards,
Ismael
Posted 4 months ago #
matthewkoster
Member

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.
http://test,atwaterlibrary.ca

Posted 4 months ago #
matthewkoster
Member

Sorry, typo http://test.atwaterlibrary.ca/

Posted 4 months ago #
matthewkoster
Member

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

Posted 4 months ago #
matthewkoster
Member

Could it do with the javascript for the avia menu?

Posted 4 months ago #
matthewkoster
Member

Update:

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.

Posted 4 months ago #
Devin
Moderator
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.

Regards,

Devin
Posted 4 months ago #
matthewkoster
Member

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.

Posted 4 months ago #
Dude
Dude
Hey!

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,
Peter
Posted 4 months ago #
matthewkoster
Member

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...

http://test.atwaterlibrary.ca

Posted 4 months ago #
Devin
Moderator

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.

Regards,

Devin

Posted 4 months ago #
matthewkoster
Member

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?

Posted 4 months ago #
Devin
Moderator

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.

Regards,

Devin

Posted 4 months ago #
Kriesi
Key Master
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 :)
Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top