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
}
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
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 creating a simple category tree for a shop and I have a problem, its look like that:
Question is how to fix its that big space that appears root-cat:hover, can anyone explain whats problem and what a solution.
Fiddle
Copied some html and css that I have in my tree, hope it will help.
You can add these rules, which will fix things for the first sub menu and partly for the other ones:
root-cat {
position: relative;
}
.sub-cat {
position: absolute;
left: 260px;
top: 8px;
}
Fiddle: https://jsfiddle.net/eLat18Ls/1/
Note: To have the other submenus appear not at the top of their page, but beside their main menu entries, you have to nest the sub menus into their respective main menu entries (in the HTML). Usually, this is done with unordered lists: ul and li elements. Just google for how to build a menu using ul and li
I cannot seem to get the sub-menu to appear on this website I built: http://website-test-lab.com/sites/mirandaparsons/
If you use Dev tools/Firebug, and check .sub-menu to display: block; then you can see that the sub-menu does appear, but not in plain sight. I've tried adding z-index to several of the menu areas with no luck.
The odd thing is, that it does appear correctly in FF on Windows?!
I haven't pasted the code here because there would be so much to copy and paste.
Any help would be much appreciated.
Thanks
I think that what you need is a background-color to .sub-menu and position relative to .nav I just tried to set it and you can see the sub menu well :
.navigation .nav {
position:relative;
}
PS : Worked on firefox 33 Mac
You need to add this to your CSS:
.navigation .nav {
position: relative;
}
This would properbly be usefull to read: http://www.w3schools.com/css/css_positioning.asp
Add this css to your stylesheet
#site-navigation.main-navigation{
position:relative;
}
I've just added a plugin for Wordpress that allows me to show my playlists from Youtube.
But the player covers the dropdown menu.
I've tried &wmode=opaque and &wmode=transparent but none of these works.
The player is embedded via iframe.
Is there another way to fix this?
http://www.kazuto.de/kingdom-hearts-birth-by-sleep/
All you need to do is change the z-index of your dropdown menus. The z-index CSS rule establishes the position on the z-axis of all positioned elements on a page.
On line 246 of style.css, add in
.menu li:hover > ul {
opacity: 1;
z-index: 1;
}