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
Related
My question here is when I hover over recipes and when I move forward to the sub menus how do I make the blue hover perfectly fit the sub headings. Like the color is not covering the text fully. And for a better understanding please do read and run my code if you like.
I am using this in the CSS
nav li:hover ul {
display: block;
}
Here is the link please do check it.
https://jsfiddle.net/harisfaisal/q68n7ro4/2/
It's because nav li {width:20%} in your code is affecting all li elements including submenu so the color covers only 20% in submenus. It can be fixed by adding width:100%; in your nav li li {} selector.
Note: your code has repeated selectors, it's better to merge them to improve readability.
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
https://bethparmar.co.uk/
The impact of this is from the homepage only, other pages work as expected.
This is a WordPress site, and the home page has code created using the old school editor method rather than a page builder.
Its a strange one as the I have concluded that the '
My Programmes' section is actually blocking the ability to click on the menu items, for example, 'Workshops'.
If you double click on the Workshop menu item, a sub menu opens, but the actual links appear blocked by the div#pg-11-0 { section.
I feel like I need to add some form of invisible space in between the elements - but by doing so it changes the page layout.
Via CSS I thought that I maybe able to force the menu element to be 'ontop' so not being blocked by another layer...
I tried doing this by changing the menu position: absolute; but failed.
Any help please?
#site-header {
z-index: 10;
position: relative;
}
Adding this css code to your theme's css file should fix your problem.
I see that you give position: absolute in your #site-header .navbar.navbar > .navbar-collapse > .navbar-nav > li > ul
So give z-index in your css.
#site-header .navbar.navbar > .navbar-collapse > .navbar-nav > li > ul {
z-index: 9
}
Im trying to create a menu bar which uses image buttons.On my menu bar, I can see my images on it but I can not click them. I used text-indent: 100%; white-space: nowrap; overflow: hidden; in my css file to hide links text. My link text became hidden but links became inactive. Moreover i tried text-indent:-9999px; but result was same. I could not find the problem maybe my html or css structure is wrong. Could you pls check it ?
I updated html and css file on jsfiddle
jsfiddle
try this:
nav ul li a{display: block}
Its Working
nav ul li a
{
display: block
}
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;
}