Skip to:

[Resolved] z-index not working in child theme for drop-down menu

  • nickharambee


    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?



Viewing 3 replies - 1 through 3 (of 3 total)

  • Mathieu Viet


    hello, just made this test with the inspector browser :

    /* i unchecked this css property */
    overflow: hidden;

    then your dropdown shows..



    @imath. Hello, and thanks. I didn’t expect the overflow:hidden to effect the sub menus as they are within the #header div, but removing that did indeed fix this issue.

    Mathieu Viet


    you’re welcome :)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] z-index not working in child theme for drop-down menu’ is closed to new replies.
Skip to toolbar