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? ).
Related
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;
}
I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.
My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?
I have looked at these questions and implemented their answers with no luck in fixing the issue:-
facebook iframe App: Send/Like button z-index issue
Other fixes I have found that did not work were:-
Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)
Changing the z-index of the classes that are listed in the answer from the link above.
Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-
All I would like is the flyout to appear on top of all elements on the page without having to change the layout.
Here is the link to my site http://mikelonsdale.co.uk
Thank you for your time and help.
Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.
Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).
The following code fixes the problem entirely, without having to change the overflow or z-index of anything. You simply add the code below, and voila. HOWEVER, it will throw off your site's layout a little (it will flow over .. ha). Amazing fix, small catch. Borderline acceptable but the best solution I found. (Found it on the WP forums).
.fb-like span {
overflow: visible !important;
width: 450px !important;
margin-right: -375px;
}
I added
.fb-like span {
z-index: 999999999999999;
}
to my css and that fixed it. It isn't even marked as active, and deactivating it in developer tools doesn't change anything either. If I take it out of my CSS things go all stupid again though.
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">
So I've tried looking through all of the posts on here, but I can't find my issue replicated anywhere (although that my speak more to my google abilities than to the uniqueness of my situation)
Basically I have a wordpress-based website (vegasonthemic.com) using the superfish plugin for the navigation menu.
I'm able to access dropdown menu items in the top navigation bar on every page except for the individual artist post items. (All Artists/Acoustic Male/clicking one of the pictures.)
When I go to a page like this one: http://vegasonthemic.com/portfolio-item/nate-ridgely-2012-04-19/ and try to access the All Artists dropdown menu it doesn't show all the way in firefox and IE and in chrome it creates these gnarly scrollbars.
I've tried adjusting z-indexes and overflow:visible;s to my little heart's content and can't figure out why on earth this is happening.
In your css the container need a overflow visible like this
#container {
width: 1280px;
overflow: visible;
}
Remove overflow:auto; from the container
#container {
overflow: auto; /*Remove this*/(from style.css (line 121))}
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.