Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 28, 2014 at 10:13 pm #216064
    matthewmagee

    On this page, I have mega menus with forms and am trying to bring them to a z-index above the title bar image (currently set to z-index:1000;). I can’t determine what to target to bring to the top.

    The mega menus are under Devotions, Blog Subscription, Members and Mailbox.

    Thank you in advance.
    Matthew

    • This topic was modified 10 years, 11 months ago by matthewmagee.
    January 29, 2014 at 12:53 am #216137
    Ismael

    Hi Matthew!

    The page is not loading properly. Have you tried increasing the z-index of the header? 

    #header {
position: relative;
z-index: 3000;
}

    Best regards,
    Ismael

    January 29, 2014 at 4:07 pm #216413
    matthewmagee

    Hi Ismael, thanks for your reply. Here’s a link to a screenshot (https://www.dropbox.com/s/gmrgps9bg1rr87w/screenshot.jpg).

    I have a non-rectangular .png for a title bar (oval in center) that I want to overlap with the menu. What I’m trying to do is separate the sub-menu, pulling that to the top z-index layer.

    Here’s the code I have now: Again, notice the sub-menu under the graphic (z-index).

    /*  Title Bar Backgrounds */
.container_wrap, #header_main {
clear: both;
position: relative;
z-index: 1;
border-top-style: solid;
border-top-width: 0px;
border-bottom-width: 1px;
}

.header_color {border-color: transparent;}

.title_container .main-title, .title_container .breadcrumb {display: none;}

#menu-item-149073 {z-index: 1500;}

.page-id-149135 .alternate_color {
background: transparent url(https://staging.boomerangdesigns.com/mom/wp-content/uploads/blog-title-bar.png) center center no-repeat;
height: 164px;
margin: -56px 0 0 0;
z-index: 1000;
text-align: center;
}

    I hope that makes sense.

    January 30, 2014 at 10:00 am #216865
    Dude

    Hey!

    I think the high z-index doesn’t work because the main menu container z-index is set to 100. Try to use following code

    
.main_menu {
z-index: 1500;
}

    to increase it.

    Best regards,
    Peter

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Want a challenge? Need help bringing mega-menu to top Z-Index layer’ is closed to new replies.