Inherited a educational organization website and running into an issue with a dropdown submenu getting clipped by an inner-content div. It looks like there is a z-index of 100 for that inner-content div, but no matter what I set the submenu z-index to I can't get it to layer over the div.
The menu item that is getting clipped is Connect > Interest Section (IS) > *Clipped Menu (there should be 5 visible links).
The organization URL is http://minnetesol.org/.
Clipped subnav element
if you change the following it will work but there is more at play in the styles then z-index:-
#main-nav ul ul li ul {
left: 250px;
top: -50px;
}
#content {
margin: 0 auto -40px;
}
You would need to tweak the logo in the header after making these changes.
It looks like a z-indexing issue - #content #inner-content has a z-index of 100, so you'll need to do
#head{
z-index: 101;
}
I'd also recommend lowering your #inner-content z-index to 1 and #head to 2 just to prevent more z-index issues in the future.
Related
I'm helping a client with her website and ran into a problem.
On the responsive version of our menu, when I hover over a menu item with a few sub-menu items, those menu items display, but an element below is showing through the text as well.
The offending element is a testimonial slider that is dynamically updated, so I'm guessing that has something to do with it.
Here's a GIF: overlap problem
Here's a link to the site: http://gogift.com.au/wordpress/
Any help is greatly appreciated!
Thanks,
Paul
You have to set the z-index of the .header-row element. Because it is positioned relative and so it's z-index is the one that counts.
This is the header-row now:
.header-row {
position: relative;
z-index: 2;
}
change it to:
.header-row {
position: relative;
z-index: 2000;
}
you could also set the .header-row to position:static and then change the z-index of the #main-navelement:
.header-row {
position: static;
z-index: 2;
}
#main-nav {
border: none;
border-radius: 0;
position: relative;
z-index: 2000;
width: 100%;
}
Edit: As there is some confusion I want to add a bit more to this answer:
The navigation is in front of the content because there is no z-index set for the <div id="content">and it's children. So any element with a z-index defined will be in front of the content.
As the header-row has a z-index of 2 - the nav is in front of the content.
The problem is that the testimonial-slides have a dynamic set z-index between 90 and 100. As they have no parent with a defined z-index and relative position this z-index will be matched against the .header-row's z-index which is only 2.
One more alternative to solve the problem would be to set the z-index of <div id="content"> to 1.
Looks like it's one of two things: either the z-index of the menu isn't high enough or the background of the menu items is transparent.
I am struggling with something.
I have two menus (http://www.omicronsolucoes.com/mat/), and I need the logo to be over the first menu. For this, I added a z-index:1 on the first menu.
But now the links on the first menu wont work (because the z-index made them go behind).
How could I maintain the logo as it is and make the links working again?
Thanks.
Try adding this to your css, not sure from where it is coming but nav#ubermenu-main-13-header-menu is getting z-index as -1, so either you add this to your css file
nav#ubermenu-main-13-header-menu {
z-index: 999 !important;
}
or try removing the z-index -1 from where is it getting applied
Try adding position relative and a greater z-index to the li. Then either remove position:relative of the ul or override it with position:static:
.ubermenu-nav{
position:static;
}
.ubermenu-nav > li{
position:relative;
z-index:11;
}
I have added margin-top:-50px; to .logo class
nav .logo {
max-height: 100px !important;
max-width: 200px !important;
margin-top: -50px;
}
So, here's the skinny...
I have a page that has a list as display:table-cell. As the width of the browser resizes, the contents (anchors) of the lists may wrap to 2 lines. The problem is the anchors that don't wrap to 2 lines aren't staying 100% height.
CSS...
.home .pushes ul {display:table;}
.home .pushes ul li {display:table-cell; vertical-align:middle; width:25%; background-color:#e5a015; color:#ffffff;}
.home .pushes ul li a {display:block; padding:4em 0; padding:4rem 0;}
So, the height of <li> should be determined by the height and padding of <a>. But, since it's <display:table-cell>, the height is determined by the tallest <a>.
Ok, so just set a {height:100%;}. But, then, the anchor doesn't keep the padding. So, just set li {height:160px;} or something. But, then the anchor isn't vertically-centered. So, just set li {line-height:160px;}. But, then the anchor is huge when it wraps to 2 lines.
So, what is a guy to do?
I could do li {display:inline-block;}. But I want all the boxes to be the same height.
JJ
Edit...
HTML included for posterity...
<ul>
<li>bleh</li>
<li>bleh</li>
</ul>
JJ
Edit 2...
The anchor background color is what isn't growing the full height of its parent.
I didn't realize that I could upload an image. Thanks for the tip.
JJ
The best way of fixing this problem would be to use position: relative and position: absolute.
Example:
li {
position: relative;
}
li a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
However, the above does not work because your li is using "display: table-cell;" and position: relative is not defined for table cells (See: Using Position Relative/Absolute within a TD?).
Therefore, your only choice is to use Javascript to get this done. There are many solutions but here is one:
Use the jQuery resize method (http://api.jquery.com/resize/) to keep track of when the window resizes. When the window resizes modify the anchor tag's padding so that it continues to cover the entire space.
I've read replies for similar problems to mine, and I believe I've tried the steps mentioned but I'm still having problems with my dropdown menu disappearing when mouse off.
I've removed the formatting of the dropdown just so the code is bare bones, please take a look:
http://freerange.wesleypearce.co.uk
If you mouse over past productions you'll see my problem.
Thanks in advance for what probably is quite a simple fix, it's just alluding me!
Cheers,
Wes.
In the rule for your dropdown uls, use padding-top: <#>px; rather than top: 45px; to put spacing between the menu header and your list. The top value should be no more than the height of the menu header, otherwise you'll create a gap between it and the list, which will remove the list's visibility as soon as the cursor moves off the header and over the gap.
Try this one on style.css line 89
I have changed the top position of ul. The problem is there is a gap between your a tag (Past Products) and dropdown ul
#menu ul ul {
margin: 0 auto;
position: absolute;
top: 40px;
visibility: hidden;
width: 90px;
}
You're pushing your submenu too far from your main menu item, just declare it 100% to push your submenu exactly below your main menu item to fix the problem:
#menu ul ul {
top: 100%; /* fix */
}
I'm trying to design a horizontal menu just using CSS
Please refer to the following
http://jsfiddle.net/aUYca/
The CSS Classes are
li.navMenuParent: A Top Level Menu Item
li.navMenuActiveParent: A Top Level ACTIVE menu item
li.navMenuNode: A Top Level Menu Item that doens't have child items
li.Active: A Child level ACTIVE menu item
I want the menu to always display the child level menu when the parent has a navMenuActiveParent element. (The intial state hover over 2Parent)
.navmenu ul li.navMenuActiveParent > ul
{
display: inline;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
However i want that submenu hidden when the user hovers over a top level menu item WITHOUT children. (Hover over the HOME menu item)
.navmenu li.navMenuParent ul
{
display: none; -- I want this applied to ALL <ul> under .navMenu
}
I want the Submenu to show the correct submenu when the user hovers over a top level menu item WITH children. (Hover over 1Parent)
.navmenu li.navMenuParent:hover ul, .navmenu li.navMenuParent.hover ul
{
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
I can't seem to get this to work with pure CSS.
Thanks for any help!
The trick is to apply the right effects to the right elements with as little markup as possible.
http://jsfiddle.net/EGNKE/74/
Mind you I didn't reset most of the stuff because jsFiddle does that for you and I would reccommend a reset css file by default too if you're not like, a god, at css.
It only dies in quirks mode in IE, but it's easy to prevent people from viewing your website in quirks mode by keeping to the standards and/or using X-UA-Compatible header (google it).
I trust you can figure the rest out yourself, else let me know :)
(oh btw you better be using a shorttag for that background arrow in a menu item background: color url('path.jpg') posx posy repeat;)