Wordpress Menu Drop-downs hidden behind div - html

I created a form for a Wordpress site http://www.bassetandbeagle.org/adoptionapplication/ and in the CSS code I put div position: absolute, so that the form would scale on mobile devices.
#formContainer {
min-width: 950px;
max-width: 950px;
padding: 10px;
position: absolute;
z-index: -1; }
Now the drop-down menus, above the form, are hidden behind it.
I attempted to set a higher z-index for the menu:
.nav-menu{
position: relative;
z-index: 1; }
But this had no apparent effect. I tried 1, 100, 1000... nada
I was able to get the drop-downs to show up again, by changing the .nav-menu to position: absolute. Unfortunately, this screwed up the positioning of the menus on the page.
I am pretty sure I am on the right track with the z-index property, based upon the other posts I have read. So, what am I doing wrong here?
Thx

Here is the solution of your problem -
CSS:
style.css line: 1431
.site {
margin: 0 auto;
max-width: 68.5714rem;
/*overflow: hidden;*/ /* remove this css rule and you will see the dropdown menu*/
}
Note: Check you site that where your .site class is applying and make the changes in css as per need.
Screen Shot:

Remove position: absolute from #formContainer.

Related

Problems with Z-index while browsing my page in mobile

I have created a portfolio page for myself.
https://alonoparag.github.io/index.html#home
My problem is that when I check the page using Google Developers tools or with my android (samsung galaxy s4) device, the navbar's items are always behind the content of #home.
I tried tweaking the z index of the navbar items versus the home content, with no avail. When Checking the elements in the developer's tools I saw that both the navbar elements and the div z-index have changed, but it didn't affected the way that the elements are stacked.
I would appreciate help with this.
Cheers
here's my code
.topnav.responsive a {
float: none;
display: block;
text-align: left;
z-index: 10000;
}
div.content {
align-content: center;
width: 85%;
margin: auto;
padding: 16px;
z-index: 1;
}
You have to give a position for z-index to work. So if you add position:relative; z-index:10; to your header, it should work fine.
You have to specify a (static) position, for example.
position: relative;
or
position: fixed;
"z-index only effects elements that have a position value other than static (the default)." - https://css-tricks.com/almanac/properties/z/z-index/
The one issue I found is that the parent #home container itself seems to be the one giving you grief. Here are some tweaks I made in the developer console on my end. I tested it on a full desktop view as well as shrunk it down in the mobile preview and it worked properly.
CSS:
#home {
z-index: 1;
}
#myTopnav {
z-index: 999;
}
In addition, make sure to establish a position value for your elements.
That should do the trick for you!

Bootstrap carousel buttons visible on the footer

I have been building a website using bootstraps scrollspy. So far so good, except that carousel buttons are appearing over my footer
Here is the footer css:
.footer {
position: fixed;
bottom: 0px;
padding-top: 15px;
width: 100%;
height: auto;
background-color: #222222;
}
Any way to fix this?
like #zack6849 said if you add the z-index property to the .footer css it should resolve your issue provided you spec a value higher than that of your slider. You should inspect the element and see what the current z-indexes are, or just use a real high value for your footer like z-index:10000;
you can read more about z-index here

Fixed div bar will not appear on top even after z-indexing

I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.

Make nested divs' width fill to the browser

Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.

Dropdown menu, z-index problems

I've got a problem. I have a drop down menu, but the drop down list is always one layer behind the body although the z-index of menu is set to 999 and z index of body set to -999
Please chceck http://www.w3dominik.com/x/finemoney/ (the menu on top right, it says dropdown and should have 2 options, only 1 is now visible)
Thanks for help
This will fix it for you:
#header_wrap {
position: relative;
z-index: 10;
}
You often need to set the z-index on the outermost parent (particularly in older versions of IE).
Just add position: relative, z-index won't work without position.
header ul {
display: inline-block;
float: right;
height: 30px;
z-index: 999;
position: relative;
}