WordPress Menu Drop-downs hidden behind div

2 Views

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.

Read More

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

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. 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:

    enter image description here