I'm using generate press and add some megamenu CSS unfortunately upon clicking the submenu it's not clickable here is the link
I tried to use this mega menu to create columns for each sub-menus
https://hrcstaging.wpengine.com/
here is the CSS that I added
https://docs.generatepress.com/article/building-simple-mega-menu/
.main-navigation ul ul {
pointer-events: inherit;
}
ok this works fine now
Related
I have a problem with part of the html and css code
I am working on a menu that has children. Unfortunately, this child cannot be opened by holding the mouse over it. I have put the html & css code inside the website site so that friends can give a proper guide.
[https://codepen.io/croner2/pen/vYRrpMg][1]
The below code was missing, where we make the dropdown ul tag visible on hover!
#mainNavigation nav.desktop ul li.dropdown:hover ul {
visibility: visible;
opacity:1;
}
codepen
Is it possible to remove an "active"-class from the menu items when hovering another menu item?
There's a working fiddle here. By default the home button has the "active"-class, whenever hovering over an other menu item i'd like to have that "active"-class removed. In this manner, only 1 menu item has the menu overlay ontop of it. Is this easy achievable by using CSS? Or do I need some fancy JavaScript?
The following piece of code will place the button overlay ontop of my menu items:
#menu li a.active,
#menu li a:hover{
text-decoration: none;
background: url('../images/menu_button_overlay.png');
background-repeat: no-repeat;
background-position: center top;
background-size: 30px 10px;
}
Thanks!
It would be possible with CSS.
#menu:hover .active {
background: none;
}
fiddle
You need to use Fancy Javascript. But even then, I doubt, it won't work because After you remove the active class from home any other menu item will have the overlay only till you hover it or click on it. If you do not click on any other menu item then in the end there won't be any overlay for any menu item.
You would need javascript (or more likely Jquery)
JQuery
$("li a").click(function () {
$(this).toggleClass("active");
$("li a").not(this).removeClass("active");
});
JSFiddle Demo
I am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}
I´m trying to create a menu with the list 'ul'.
The problem I´m facing is:
The submenu doesn´t appear at the top of its corresponding menu link, but, below.
You can see it at this link:
http://jsfiddle.net/6r6e8/
Thanks.
Try including a top value in your CSS:
ul.menu ul {
top: 0;
}
You could add margin-top: -21px to your ul.menu ul styles as a quick fix.
I have made a css dropline menu. It's works fine, but there's a small issue if i go to the child menu, the parent menu text color should be hover text color(#ccc;), but it's move default color(#000;).
Here Jsfiddle Link: http://jsfiddle.net/thilakar/aTXbm/4/
Please help me out with this issue.
Thanks
That's because you have the hover-effect on the link. You'll have to use :hover on the li to have the hover effect even when you're hovering a submenu.
Change
.menu ul li a:hover
To
.menu ul li:hover a
And I think you'll get the effect you're after.