Submenu issues - what's wrong with the hover? - wordpress

The site (Wordpress) I'm working on is https://www.mosquitohunters.com/
It's a custom developed theme, so I'm not sure how the menu was set up originally, but when I try to add sub-menu items for a dropdown menu, things get really screwed up.
I can fix most of the styling issues with CSS, however the hover to activate the dropdown has me stumped. It seems like it's being done with javascript or jquery, and it's jumpy and doesn't work properly.
My question is...what is the best way to fix this? Is there something I should be looking for in the .js file that I can deactivate or turn off and just make the dropdown a :hover state instead? Seems like it would make more sense...
Thanks!

The website uses this plugin:
https://www.wordpress.org/plugins/megamenu/
Since this file is included: https://www.mosquitohunters.com/wp-content/plugins/megamenu/js/maxmegamenu.js?ver=2.3

Related

Weird icons border in footer in Wordpress

I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.

Issue with IE, Joomla and hover

I have set up a page in Joomla, and coded a template.
It all works great, but in IE my hovers in CSS doesn't work.
No matter where I do hover on the page, it simply doesn't react in IE.
...Works great on all other browsers though.
If I set up a page, that is not using Joomla, the hover works perfect, so I think it has something to do with Joomla.
I couldn't find anything about this problem on google, so has anyone had this problem and do you know have to solve?
Thanks.

Hover Menu Issue on Ipad back and forth

I've been pulling my hair out trying to get my CSS hover menu to work properly on iPad. I have tried applying hover classes using javascript with the same result, so it must be in the css. The site also utilizes twitter bootstrap.
What happens currently is that on a tap, the dropdown/link hover state show for a split second, then the previous link dropdown/hover show, then it shows the correct one again and it remains open as it should.
EDIT: In case anyone else has this problem, update bootstrap (primarily the dropdown class) and you should be fine.
Updated bootstrap, primarily the dropdown class javascript.

Menu 'Swinging' Weirdly when hovered

I'm working on a site and I have a big css problem; my menus are 'Swinging' in a very weird manner when hovered. The css / html code on its own works well, but once I implement the slider within the real site it behaves differently. Its probably a css issue, but also to note is my site is built on a Responsive theme. Anyone with an idea of how I can fix this please lete kme know. Thanks. Here is the link to the site.
When you say "swinging" do you mean the effect where they start at the top-left then grow diagonally to the bottom-right? That's jQuery's ".show" event firing. Try replacing that with ".slideToggle".
Unfortunately the Wordpress template you're using is quite messy so it's hard to troubleshoot.

CSS :hover dropdown. Just need a pointer

Hi all I am working on a project and am trying to do this all by hand for a learning exercise. I am not looking for the code that does the job but just an explanation of how this should be done.
the page I am working on is http://dev.davydsoft.com/playing.html
What I would like is to have a dropdown "menu" image when you hover over the pics up top. This is inspired and by the twitter bar. When you click on your user name on the twitter bar you get that dropdown.
I have played with alot of examples and for some reason it just wont click for me.
Any pointers would be great.
welcome to the stack overflow! I would recommend that you take a look at the first tutorial on this page:
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
It explains how to use jquery (javascript) to show and hide hidden html elements.
If you are looking for a css only solution, you might search for "css suckerfish menu".
You need javascript for the hover event css for styling and html
Have a look at: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Basically, if you only want guidance, then start looking into how to style with :hover selectors.

Resources