Search code examples
csswordpresswordpress-themingz-index

Main Navigation Submenu Hidden Behind Page Content - Can't Figure Out Why


The main navigation submenu items appear behind the content on this one page. It must have to do with the custom page template but I see no z-index values that are interfering. This doesn't happen on the sticky header, only on the main header that is visible when you haven't scrolled down.

When I add z-index values to the header and submenu plus position:inherit (and others) it does not help. The offending section begins with the code below.

 <div style="margin-bottom:35px;margin-top: 20px;">

Solution

  • Phew! Played around with the position element and 'fixed' it :)

    .sf-menu > .financity-normal-menu ul { position: fixed !important; }
    

    I added this to just this page b/c other pages are not affected and the issue is now resolved on both desktop & mobile. It was set to:

    position: absolute
    

    which apparently does more than I know. Thank you for taking a look at this!