I'm trying to create a mobile dropdown menu but my menu items are hidden behind another div. I tried using the z-index but apparently I'm doing something wrong...
I created the following JSFiddle to show the problem:
http://jsfiddle.net/hq160xx2/4/
As you can see, a part of menu item "Object 2" is hidden behind the "Home" and "Nav2" menu. What should I add to my code so that Object 2 appears on top of the "Home" and "Nav2" menu ?
( Btw: I know that changing the height of div id="Upper" could solve the problem, but that's really not what I'm looking for. )
Simply change overflow:hidden; to overflow:visible; on the .upper-mobile element:
.upper-mobile {
overflow: visible;
}
Related
i have a sidebar menu on my WordPress widget area, and sub-menu items are displayed under main content, i can't make it work with z-index, where should i put CSS code to make it work
i tried adding z-index to my style codes, and nothing happened, maybe i put them in a wrong place or i have to use some sort of other code with style code
you can see the problem on the main page
website address is: http://www.nanotajhiz.com
This happens because you have overflow: hidden; on your .sidebar which holds the items, which causes any content that goes outside the sidebar to be hidden.
You should remove overflow: hidden from .sidebar and adjust the other layout styles accordingly. You can use the clearfix method instead ( What is a clearfix? ).
I'm developing a child theme for the Buddypress default theme. I have customised the look of the navigation bar quite a lot, and now I am trying to get drop-down menus working. They work fine in the default theme. In the default theme a class is added to list items in the nav bar that are hovered over, .sfhover, and this div class has the CSS 'position:relative;z-index:1000'. The #container div that the drop-down menus should stay on top of has the CSS 'position:relative' and no z-index set. Presumably this means that the z-index is the default of 0. Finally the #header div which includes the nav bar has the CSS 'position:relative;z-index:1000'.
I have checked that in my child theme all of the CSS is the same for these three divs, and indeed it is, and yet the drop-down menu does not show above the #container div, but is cut off where the #container div starts.
You can see what I mean if you visit this page, and hover over the 'links' items in the nav bar. You will need the following credentials to see the page as it is password protected:
Username: guest
Password: stackoverflow
Perhaps someone can spot why this isn't working as expected with my child theme?
Thanks,
Nick
there is nothing wrong with your z-index. You have the #header set to overflow: hidden which means that nothing will flow out of it your nav sub menu included. Remove this and you will be good.
problem is in <div id="header"> block which has property overflow: hidden and it hides everything that out of it dimension. You have to remove it and if you use it for clear floats, try another method: boilerplate clearfix or just add div with clear:both after <div id="header">
I'm adding a new dropdown div to an existing WordPress theme with it's own dropdown menu.
The new dropdown is activated and "dropping down" from an area above the menu.
The menu is set to z-index:99, but whatever value i give "my dropdown", the menu still appears on top of it.
Only exception is if i give the menu z-index:0, then all works fine except that the menu's dropdowns, of course, does not overlap items further down the page :/
Help appreciated!
Update: I have tried different position values, the menu needs to be "relative" to work.
The dropdown is now absolute, but relative gives the same result.
You have the following declared in your styles.css stylesheet on line: 316:
#section-tophat, #section-footer, #section-sub-footer { position: relative; z-index: 1; } /* Setup for :after double bgs below */
You're setting your #section-tophat to z-index:1 and thus at a lower level than your menu, so just remove your #section-tophat id from that line and your dropdown works fine.
z-index only work on position relative, absolute & fixed. So, give position:relative to your dropdown DIV.
Do you have an example page that we can check? You also may have stacking context issues.
Check my answer about how z-index works.
In the below image my drop down menu is not displaying over the content.It is very transparent know.Can anyone help me what I have to add to make this drop down menu un-transparent.
Your dropdown is probably a div in the html dom. You could find the name of that `div' and then apply a background to it using css:
.dropdown_div_name { background-color: white; }
Edit:
Re looking at the image you posted it is most probably a problem with the z-index as others also suggested, since for example if you look at the 'Technology/Connected TV' header, that shows over the menu contents. That could be fixed by changing the z-index of the dropdown menu
.dropdown_div_name { z-index:100; }
where 100 should be a number bigger than the z-index of the rest items that you want it to overlap
A background-color. Without one, the default colour is transparent, hence you see everything behind it.
Stack,
I'm having difficulty creating a good drop down navigation menu using only css. The menu is simple, it needs to only have a few things in it, and only needs to drop down (no need to go down and over etc).
The menu is somewhat working, but whenever I hover over it to drop it down, the menu gets overlapped by the wrapper div directly below the header div where the menu is located. I've tried setting the z-index of the drop down menu to like 20000 and it is still being overlapped.
Here is a direct link to the test page I am working on:
http://www.lolbrary.com/workspace/dropdownheader.php
Any ideas?
Thanky,
billmalarky
In #fullheaderbar and #profilemenu you need to remove overflow:hidden; and in .profile-menu ul you need to change position:relative to position:absolute;
then tweak from there :)