On our website, when we move the mouse over the mega menu, it disappears immediately.
I would like it to go away after 200-300ms because in the mega menu we have a form, when someone clicks on "hint" - the menu will disappear before selecting it.
#media (min-width: 1025px){
.elementskit-megamenu-has .elementskit-megamenu-panel {
transition: 300ms !important; //your desired time in milliseconds
}
}
So far we have tried with the above code but unfortunately it won't help.
Depends what is the CSS that is applied when the mega menu panel is going invisible.
If it is display: none; to display: block;, and vise versa, I'm pretty certain that you can't apply transition effects to the display property.
If you can share your website for further investigation would be very helpful.
Related
My question can be very complex, because I don't know either what I am talking about, I am literally a newbie at coding.
So, a have a header mega menu, but the titles in it don't hover when the mouse is over. I want them to be hovered, but their CSS class is "menu-item" and when I apply the hover css on this, every menu on my theme gets hovered.
What should be my solution? The element ID's in my mega menu starting with 50xxx like "menu-title-5082" or "menu-title-5083" and the other menu titles, like main menu, are starting with another numbers. So I thought it would be a solution, when I select all elements starting with 50xx. But how can I do that, or would it be a solution? Thanks!
My code was:
.menu-item:hover {
background-color: #dddddd;
}
and it didn't work properly because all menu items affected, so I tried this:
.menu-item-50:hover {
background-color: #dddddd;
}
and it didn't work at all.
What do you suggest?
When in the responsive/mobile view of www.rohiniartstudio.com
When I click on the menu, the menu flickers on collapsing and displays the content below the menu.
On default it was taking about 1-2s before it shows the menu items then added this code:
.collapsing
{
-webkit-transition: none;
transition: none;
display: none;
}
Can someone help me out with the flickering issue?
Please visit the site and let me know?
Try removing the # value from the data-target property
Set as data-target="site-navigation".
You can't use display property when you want to make an animation with transition. The element and all the positions should be countable by CSS.
Refer: https://stackoverflow.com/a/38772750/9218664
If you want to make an animation on the mobile accordion menu you should use max-height property without display.
You can see how it happens here; https://codepen.io/volcanioo/pen/LYGaJdV
We have a website fabulouslanzarote.com that has a navigation menu implemented using CSS3. The 'The Resort' and 'The Community' menu options have
sub-menus.
Recently it has been reported that these sub-menus are not accessible in Chrome. They appear when the top-level link is hovered, but disappear when you attempt to click one of the links.
We have not updated the site in a couple of months and they had been working following the last deployment, so maybe this is the result of an update to Chrome? The menus work fine in Firefox and Edge.
Does anyone know what is preventing the sub-menus from working properly in Chrome?
#Johannes is correct. The menu has a gap where, as you move your cursor over it, it loses the hover state. Try adding a transparent pseudo element on the ul.drop to fill the gap and keep the hover state as the cursor moves.
ul.drop:after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 27px;
}
Disclaimer: While I don't usually recommend using hardcoded values, your menu already leverages them. That's why I chose 27px. It fit based on the other hardcoded values.
I think they are just a little bit to far below the main menu: When you move the mouse rather slowly (and not exactly in the middle), you loose the "hover" state and the submenu disappears.
I'd move them up a bit and make that arrow on top a little bit smaller to avoid that situation.
I'm developing a site for a client on Wordpress using a theme I'm modifying and I've been making a bunch of edits to the mobile nav menu and somewhere along the line I messed something up and now after scrolling to the bottom of the mobile nav half of it gets stuck to the top of the screen.
Current site: http://test.kevinwallace.io/
It was working right, and I've tried to undo and troubleshoot all the changes I've made and nothing is working. Does anyone know what might be the problem?
Edit: So I just tried a clean version of the theme and apparently it's always had this behavior. Is there a way to simply close the mobile nav when the user scrolls past?
you dont want that scroll ?
iam not understand
if you dont want scroll mean
#media (max-width: 767px)
hotmagazine_sty…ver=4.7.2:6304
.navbar-default .navbar-collapse {
max-height: 220px;
overflow-y: scroll;
overflow-x: hidden;
}
please remove this code
http://test.kevinwallace.io/wp-content/themes/hotmagazine/css/hotmagazine_style.css?ver=4.7.2
line 6304
enter image description here
So we're using Cherry Frameworks (ugh) with Wordpress. The third-level navigation is getting cut off. I've tried manipulating the CSS to fix the issue to no avail. There's no option in the framework.
The problem resides in the Services menu. Resize your screen smaller to view the issue.
My solution is to push the third-level nav to the left side instead of the right side. Thoughts on how to do this?
http://dev.torontofamilytherapist.com/
So using chrome's inspect element, I was able to figure out what needed to be changed:
#topnav li .sub-menu .sub-menu {
left: 100%;
margin: -10px 0 0 2px;
}
changed to:
#topnav li .sub-menu .sub-menu {
left: -100%;
margin: -12px 0 0 2px;
width: 100%;
}
The result:
As you can see the items are appearing on the left, but you'll need to do some css tweaks to get them to look juuuust right.
Here's how you can troubleshoot CSS issues like this using chrome's developer tools:
Right click over the offending element, in this case: we are looking at "Services", then select "Inspect Element":
You should now be inspecting the current CSS like so:
Now since these items are appearing when you hover, you'll have to 'force' a hover state.
This is where the fun begins. You'll have to make sure you find the right elements to force the hover on. I actually had a little struggle with this, so I ended up adding the force hover state to many other elements until it finally appeared (the green menu)
Repeated the same process to get the third tier menu.
Now you right click on the actual menu and select "inspect element" again - this time since the menus are FORCED HOVER, the item will stay selected when move the mouse away and you can finally see the actual CSS.
It was actually harder than it needed to be, as the theme really has some counter-intuitive settings to show these menus (why not just on hover?? it really felt like on multiple items hover..)