[Plugin: Schemeable Sliding Panel] Layering conflict

  • Resolved dpeek

    (@dpeek)


    11 years, 6 months ago

    But first off, very nice plugin. A well needed adaptation of WP Sliding Panel. Funny thing is I had just finished with my own manual adaptation of that plugin, but all the covenience interface features on this one definately make it worth the switch.

    However,… I’m having real trouble forcing it to play nice with a fixed menu I already have on my site. The entire Tab row at top prevents the main menu from being clickable. Take a look – http://dev.buildersinaugusta.com/

    I’ve tried crunching it in firebug, messing with overflow and z-index properties, but no dice. Any ideas?

    Keep up the great work!

    http://wordpress.org/extend/plugins/schemeable-sliding-panel/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author kdmurthy

    (@kdmurthy)

    11 years, 6 months ago

    Glad that you liked it. Played around a bit and this seems to be working:

    #navbar {
  z-index: auto;
}

#navbar div.navbar div.navbar-inner {
  z-index: 10005 !important;
  width: 800px;
}

#sliding-panel .tab ul.login {
    clear: right;
    display: block;
    height: 42px;
    line-height: 42px;
    margin: 0;
    position: relative;
    text-align: center;
    width: auto;
    z-index: 10001;
}

    Don’t ask me why 😉

    — KD

    Thread Starter dpeek

    (@dpeek)

    11 years, 6 months ago

    Thanks for the tip. I’ve inserted that css and it does allow the two fixed elements to finally co-exist, but now the main page content when scrolled up slides above and over the nav bar and not behind it.

    It’s soo close to everything playing nice. Again I’ve been grappling with it in firebug, tried to set z-index of the navbar to a number, but yea only ‘auto’ will allow it to play nice with the other fixed one.

    Hoping you could work some final magic?

    Plugin Author kdmurthy

    (@kdmurthy)

    11 years, 6 months ago

    Tried another approach. Check this out.

    #sliding-panel {
 background: black;
}

#navbar {
  min-width: 560px;
  width: 560px;
  z-index: 10001;} 

#navbar .navbar-inner {
  background: url(http://dev.buildersinaugusta.com/wp-content/uploads/sliding-panel-schemes/images/tab_b-272727-999999.png) repeat-x 0 -1px;
}

    The only problem I see is that the navbar is aligned to the left. Some padding/margin can be used to align it properly.

    — KD

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: Schemeable Sliding Panel] Layering conflict’ is closed to new replies.