So currently here: http://pixphoriad.haneuri.net/header.php
I have a link hover effect on the top five links that I snagged online somewhere.
What I want to do is add a smooth css drop down menu from the "Resources" link but when I tried to play with it, nothing worked. I don't understand a whole lot that's going on with that current code in regards to that hover, and I'd like the link hover to stay the same, just have a drop down menu with links when hovered over.
Related
After too many hours of frustration spent not understanding what was happening, a random idea to test seems to have confirmed the issue, but no idea how to properly resolve, and I'm truly not certain if this is a wordpress, css or even a theme caused issue (Avada theme). So a quick explanation:
Wordpress, Avada theme. Everything updated and patched. There is a menu on the site. There is a basic white color for the text, and hovering over a menu item changes the text color to orange and adds a border to the top and bottom. Nothing crazy. Just a little "animation" by setting a base state for the menu items (text white, background transparent, no border), and setting some different parameters for when it's hovered/active. I actually set the options in the avada builder, but also confirmed what was being applied with chrome dev tools. While in the builder back end after setting this, it works flawlessly. Hovering a menu item triggers the transition and moving off returns it to original state. If I visit the page normally however, all the menu items are already displaying and stuck in their hover state. From first moment it's visible it's already like that, and all the menu items are the same as if they were all being hovered. Hovering, clicking etc doesn't change the state. It acts like the hover/active properties are always active. Even trying to force change the element state in chrome dev tools doesn't change anything. If I go back into the live edit mode (which is still rendering the site as well), it's functioning perfectly.
I couldn't find much of anything hunting the forums. But a lucky break....I noticed that all the links in the menu were of anchor link variety. The kind that has ...com/#xxxxx in the url where clicking on it scrolls to a section or part of the same page instead of taking you to a unique page. The site was set as a one page. Using the avada Wedding demo site as a starting point. So I tested replacing a menu item with an anchor link url with any other link without the #xxxxx . Suddenly, it works perfectly again. Any of the anchor link items will still be stuck in that hover state appearence, but any item not using an anchor link looks and works fine even when the menu is a mix of both.
So the dillema. The page is all on one page, so the menu items need to use the anchor style. I'm not certain why anchor link seems to be be stuck on hover/active. I had wondered if it's just technically always active by the way it works which would explain this. Any thoughts?
Menu items with anchor link urls don't change between regular or hover/active state
I am having problems with my drop down menu. When I try to click on one of the links in the sub-menu, focus is lost from the parent and so the menu disappears, making it impossible to follow the links in the sub-menu. I have searched this forum and google and although there are many similar issues, I can't find any solutions to my particular problem. I would greatly appreciate any help on this. The site is www.emmatuscaloosa.com and the sub-menu is under the "categories" button.
Dont display the sub-menu none.. rather hide it with opacity.
I worked out a pretty simple fix for this by adding some CSS to the sub menu hover state. Im hiding / showing the sub menu using the max-height property and fixed the issue by writing:
.sub-menu:hover {
max-height:100%
}
That simple! Whenever the mouse is hovering on any sub menu item the menu must stay visible, allowing enough time to click on the enclosed links. Not sure if this is the "proper" way to fix the issue but it's working like a charm.
Dont' use focus. There are other ways, for example you could use :target or :hover to open the submenu. Using target, you will have to add an id to the submenu.
Target:
.sub-menu{display:none;}
#categories:target{display:block}
Another way is to use Javascript.
I am using a drop-down menu written in CSS. Been able to get it to my liking but one thing seems to elude me. I want the drop-down menu to close upon mouse click on an item. Fiddling around with :target for some time, just cannot make it work.
http://www.jsfiddle.net/DAtLC/
I'm currently coding a theme that calls for a revolution slider at the top of the page and I also need a dropdown menu system.
I'm trying to use Superfish and that works fine but when you hover to see the dropdown menu items, they show up underneath my slider.
I've tried playing around with z-index (including adding position: relative) but I just cannot get this to work. I've tried adding z-index of a ridiculous amount to the header, the menu, the list items basically everything I could but there must be something I'm missing.
I've found a few answers by Googling but it always suggests z-index.
The site can be found at:
http://clients.benpalmer.me/medina/introduction-to-south-arabian-civilization/#sidr-main
The dropdown menu should show up over the slider and is under the 'Inscriptions' menu item.
Any help would be massively appreciated!
I have edited the CSS on my menu on this site:
So it would display completely across at the font size I want (previously it was turning into a two layer menu). However, now for some reason the submenu under "Show Your Support" is very difficult to click on. When you hover and try to move your mouse down to an option it disappears half the time before you can click on anything.
I have played around with the code in Chrome (inspect element) and I can't seem to find out what is wrong. Can someone assist me, please?
Thank you.
There is a gap between the menu and where the sub-menu appears. See Image below:
When you hover away from the menu item and the mouse is on its way to the sub-menu, the mouse ceases to be on 'hover' (while crossing over the gap) - making the sub-menu disappear.
If you can eliminate the gap (i.e. place where the sub-menu is positioned higher up the page), the 'hover' state will remain on mouse-move and the sub-menu will stay 'shown' for clicking.
Does that help?
PS
posted as an answer (instead of comment) so I could include the image in my explanation.
In your show your support tag, inside add this style
style="padding-bottom:10px;"
So that I am able to operate now without any hover before on click issue. try and let me know. I tried in IE.