Deploy on hover

Hello Mike,

It is not possible to use the hover event because on mobile I use the same events and it will never open on these devices. Maybe later if I ll find some time or someone else want to add this functionality, the on hover deployment will be added.

Regards

Thank you for your response!

Is it possible for you to send me the code which you used to get the hover working? From there i can try to figure out how to get it working onh a mobile. If i can solve it, i’ll send you the code back.

Second thing, when i hover a menu-item it stays highlighted even when i’m not hovering above it. How can i make the highlight disappear if i’m not hovering above the menu-item??

Many thanks in advance!

Greets Mike

Hi Mike,

I m afraid there is not a another version that I didn’t used, for the hover event. If you want to experiment with the JavaScript events just replace the events you want in js/all-in.js

For the second thing you mention is a bug I didn’t noticed so far. There is a class active in the a.menu-link elements that is not removed when the menu item is being closed.

I ll try to fix it if I ll find some time…

Regards

Thanks for the reply. For the deploy on hover thing i’m still working on it. For the second thing i changed this code on line 468 in All-in.css

.menu-item a.menu-link.active,  <--- this here
.menu-item a.menu-static-link:hover,
.menu-item a.menu-link:hover,
.menu-item a.menu-static:hover{
	background-color: rgba(0,0,0,0.25)
}

To

.menu-item a.menu-link.selected,  <--- to this
.menu-item a.menu-static-link:hover,
.menu-item a.menu-link:hover,
.menu-item a.menu-static:hover{
	background-color: rgba(0,0,0,0.25)
}

Thanks again. I’ll let you know if i have found the solution for the deploy on hover.

Greets Mike

Hello,

I am using the Mega Menu and I am having a problem. As I try to go to the next drop down on the menu it goes away. So I am unable to click on a particular page. Can you tell me how I can correct this?

My site is https://www.test.ashevilleandbeyond.com

Thank you!

Looks like your submenu is to far from the main menu. So when you hover your mouse to the submenu, it basically ‘unhover’ the main menu.

Try adding this to your style.css

#main-menu > ul.menu > li > .megamenu-child-container {
    margin-top: -20px;
}

As your submenu/drop down menu will rise a little bit, the problem should be solved.

Hope it helped!

Greets Mike

Thank you! I will let you know.

Hi Mike,

Before I add this to the wrong place can you please tell me if at the bottom of the theme editor it has a place to add css. Is that where I add it.

Have had so many problems with this site today and I don’t think I can take anymore.

Thanks again!!!

@mikos91

Hi Mike,

Thank you for your css value and for your time you spent on this. I added your value on the new branch I created about the hover event. You can find it here: https://github.com/cookforweb/all-in-menu/tree/hover

My main concerns about hover effect is the mobile behavior of the menu. As you can see I added the exception in “mouseenter” effect to be applied only if the window is bigger than 768px (where the mobile menu is enabled).

Please download the branch from github and test it yourself and make any correction you like.

Regards,
Thanasis

Hi Mike,

I just read Thanasis explanation of the hover situation. I hope I don’t have to go into css and change all of that. I’m hoping that was a completely different problem.

Yikes!!!!!
Mac

@ cookforweb,
Thanks for the addition! Forgot the menu is responsive.. I’ll take a look when i’m home again later today.

@129mac,
Well if you want to make customizations to a plugin or theme i suggest you use a child theme and customize the style.css within. Easiest to keep total control over all your changes. I’ll look into the hover action when i get back home later today.

Greets Mike

Thank you Mike! I just don’t want to keep going back and fixing problems that I may have created.

@cookforweb @129mac,
Hmm, after taking a closer look at the css it looks like it solves the problem by commenting top: 80px; in the following div class.. Any reason why it’s there?

.megamenu-child-container {
    background: #1c1c1c;
    border-top: 3px solid;
    padding: 10px 10px 0px;
    position: absolute;
    top: 80px; <!-- this here -->
    left: 0px;
    float: left;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    z-index: 99;
}

Because after deleting this your menu is working just fine.. Also tablet/phone version.

Mistake message..

Hi Mike,

I am not sure if you have sent me the above information for the mega menu. I see a message was @cookforweb with style changes. Not sure if those are meant for me or for someone else. I have not made any changes as I am trying to find out exactly where I am adding this. Please let me know what changes I can make.

Thanks!