I'm having problems with where to place the right z-index css code.
My dropdown menu is not on top of all the content as you can see here: http://bit.ly/18j63r4
I've tried to add the z-index code everywhere but it just doesn't seem to work for me.
Hope you can help me out!
(I can't access all the css code as I'm using a ecommerce standard platform. The z index code needs to be placed somewhere in the .dropdown or .kolommen css code.
Thanks in advance)
Removing the existing z-index from
#filterContainer .nav {
}
Makes it work...
It's also worth nothing that z-index will only work on positioned elements
'#header_2_inner' for this element add property
{position: relative;
z-index: 9999;}
it will help you
or for
#filterContainer .nav {
font-size: 11px;
position: relative;
z-index: 999;
}
add z-index:2
#filterContainer .nav {
font-size: 11px;
position: relative;
z-index: 2;
}
You've got z-index:999 on your <div class="nav"> inside <div class="product" id="filterContainer">. Simply remove it and drop down menu will be shown on top of it.
Edit:
Since you can't access all of the code (maybe you can override it in you css ?) it is hard to help you. If you can, set z-index:1000 to #header-modules .h-left {
z-index: 1000;
}
Related
Hi guys and Happy New Year!
I am having some trouble with the CSS of the navigation menu submenu items on my WordPress website.
As you can see in the screenshot, the sub-submenu is displayed one line further down than it should be, making it nearly impossible for the user to use it.
The website is live on here and I'm struggling to find what is wrong with the CSS. Everything seems fine.
Can anyone help me out? What should I add/change to ensure that the 3rd level menu items appear in the correct place?
Thank you very much in advance for your help and time!
Remove top 100% from the below CSS class, then list items will be aligned properly.
`.menu>li.menu-item-has-children:hover ul {
visibility: visible;
opacity: 1;
/* top: 100%; */
z-index: 999;
}`
The following code solved it:
#media (min-width: 768px) {
.menu>li.menu-item-has-children ul li > ul {
top: -1px !important;
}
}
Im having an issue having a link that when i hover it should display a div I have set up, the basic CSS looks like so,
#adiv {
max-height: 50px;
max-width: 50px;
z-index: 5;
display: none;
background-color: red;
}
#a:hover + #adiv {
display: block;
}
#a:hover {
color: white;
}
"#a" is a basic anchor element and lights up white when hovered as my code suggests, when i turn "#adiv" display back to block manually I can see the red square, really not sure what could be disrupting it from showing. I can post the HTML if required, I have it also on codepen http://codepen.io/Keiffy101/pen/aOWJZa any assistance appreciated, I'm a bit of an amature as it seems it should be straight forward.
thanks Keiffy101
#a:hover + #adiv {
display: block;
}
This will not work as it assume that #a is a direct sibling of #adiv...in other words that #adiv immediately follows #a in your HTML....and it doesn't.
In fact, given your current HTML structure, there is no way for hovering over #a to affect #adiv as the two elements do not share a common parent.
30 CSS Selectors to Memorize
Using CSS, is there any way to show a div which is there inside an li element? i don't wanna use any javascript for this.
here is my sample code for this.
<ul>
<li id="help">
Help
<div id="helpContainer">
This is the help text content
</div>
</li>
</ul>
CSS
#helpContainer
{
display:none;
}
here it is, i wanna display helpContainer div on click of li(id=help)
As I mentioned in the comments. You can use :target.
Or if you want to go without :target .
#helpContainer{
float: left;
display:none;
position: absolute;
padding-top: 20px;
top: 10px;
}
#help:active #helpContainer{
display: block;
}
#helpContainer:hover{
display: block;
}
I made a little demo for that.
http://jsbin.com/eyavuw/1/
(source code) http://jsbin.com/eyavuw/1/edit
DEMO DEMO2 DEMO3
#helpContainer {
display: none;
}
li#help:hover div#helpContainer{
display: block;
}
li#help:target div#helpContainer{
display: block;
}
jsFiddle DEMO
Here's a CSS3 method that hides Help until it's needed.
To view the hidden Help, click the resize widget seen at the bottom right corner and drag down vertically.
CSS3:
.help{
background-color: lightblue;
width: 200px;
height: 25px;
min-height: 25px;
line-height: 25px;
max-height: 50px;
resize: vertical;
overflow: hidden;
}
.helpContainer {
background-color: yellow;
color: red;
}
CSS is for styling, so, you can use it to manipulate DOM elements, for that, you will need Javascript.
You must use Javascript to manipulate the DOM (Document Object Model) of the page.
This article describes how to use the #anchor tag coupled with the puesdo-class :target CSS selector (http://reference.sitepoint.com/css/pseudoclass-target). This doesn't really do what you want though (you would have to use an anchor tag to hit new # tags to put the page in different states whereas with Javascript you could just assign a listener to the onclick event on the object you actually care about), and I would never use this in practice.
I have a page that displays correctly in Chrome, but not Firefox or IE. It seems that an element that has display:none is taking up space & forcing some text to the right.
http://flybysouth.com/faqs/
This is a WordPress site, and I am using a premium theme with my own customization. I have applied the following custom css in an attempt to remove the header-wrapper from the page. I know it's overkill; I must be chasing the wrong element...
#header-wrapper,
#leader,
#leader .margin,
#leader .margin h1 { display:none; margin: 0; padding: 0; width: 0; height: 0; }
Any ideas what is causing the space in front of "What makes it white?" Thanks!
It looks like you might have an uncleared float somewhere above the main content area, try adding clear:both; to #main-col:
#main-col {
clear: both;
margin-top: 20px;
}
I'm using Twitter Bootstrap
I need to draw menu line this:
https://www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png .
So I need draw lines through vertical dividers.
Here what I have now - http://jsfiddle.net/KckU3/8/
I can't get how to make it ?
simply use
<hr class="divider">
that should give you what you want
Now there is:
<li class="divider"></li>
First you had a typo in the .dropdown-toggle class.
Then, you are not looking for a vertical divider, which would look like a border, but for a border, and you just need to hide some of it.
Here is your clue :
.navbar .nav > li > a.dropdown-toggle {
position: relative;
bottom: -1px;
z-index: 1005;
background: white;
padding-bottom: 12px;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
/* ... */
border-top: 1px solid #000;
}
The padding-bottom is actually just one more pixel than defined by default.
The other important thing is the position to left or right :
ul.nav li.dropdown:hover ul.dropdown-menu {
/* ... */
left: 0px;
}
I fixed a few other things for better effects, but you have the main idea.
Updated jsfiddle
If I understood you correctly
<li><hr></li>
Should be useful
Your post is somewhat confusing, but from the image you posted, it appears you want to create a tabbed menu with a dropdown? If so, Bootstrap already lets you do that.
Tab Menus: http://twitter.github.com/bootstrap/components.html#navs
Dropdowns: http://twitter.github.com/bootstrap/javascript.html#dropdowns
Here's a demo that puts it together: http://jsfiddle.net/LWTqS/