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;
}
Related
I want to remove icons from my website using CSS
You can see it here https://www.stormyark.de/hksv
I uploaded the website files at github
I already tried to set the "width=0" of the icons but nothing happened.
use display: none; on the class of the element you want to hide.
There are 3 ways of hiding an element in CSS.
display: none;
This will remove the element from the DOM
opacity: 0;
This will hide the element.
visibility:hidden;
This will hide the element.
Note: Opacity and visibility does not remove the element.
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
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
}
I'm using the JB DropDown Menu for Bootstrap module in Joomla.
I have the dropdown menu working however, when there is a photo. The menu shows under the image. ie.) blocking the Dropdown Menu. This currently happens in Chrome and Safari.
Update One-
No relative or z-index on article/photo css
Section for Dropdown on left
#_break ul{
z-index:1000;
}
---------- End Update One -----
(Old Code)
Section for photo on right
body.menu-events-and-activities article.post-45{
z-index: 2;
position: relative;
}
Section for Dropdown on left
#_break ul{
z-index:1;
background-color: yellow;
}
You have to try something higher to z-index like 1000.
Please try to add z-index to prior div than ul or the li to see if it get fixed.
Why the heck do your articles have a z-index? They shouldn't.
I have this html page: https://dl.dropboxusercontent.com/u/84321529/Fensternorm/index.html
There is a bigger div when you hover products and it contains more information about the product and one button. This content is hidden with overflow:hidden and everything is done with pure css solution.
I have no idea why is that problem with google chrome (Version 29.0.1547.66 m) and safari(5.1.7). Tested it on Firefox on mac & windows and on IE>7 and it works fine.
Do you have any idea how to fix this?
Put the position: absolute; in these class: .product-list li div {}
.product-list li div {
width:184px;
color:#999;
line-height:15px;
position:absolute; // <--
}
Disable absolute positioning on the div inside of the li and, in all probability, you should have a working solution.