Dropdown menu appearing behind page content

Sometimes, maybe 2 in 10 visits, test users are reporting that the top navigation menu appears behind the site content and that a refresh is the only way to resolve the issue. Any help would be much appreciated!

  • Adam Czajczyk
    • Support Gorilla

    Hi Brenton

    I hope you're fine today!

    I checked the site and initially couldn't replicate this but after few more tests (I asked my colleagues to check on their ends too) we were able to "catch" that up. Further checking showed up that it's actually related to... page scrolling:

    a slight (often accidental) scroll up/down sometimes causes that drop-down menu to go behind the content.

    It seems to be related to the "opacity" (which basically controls "transparency" of an element) CSS attribute applied to the nav-menu container. This seems to be the main reasons for the issue. When the site is scrolled that opacity value is changed, probably to provide some smooth fade-in/fade-out effect. Sometimes it never gets back to the value of 1 which seems to be necessary for the sub-menu to stay on top.

    When I tested it, adding this CSS seemed to help (without affecting the way the site looks and behaves otherwise):

    #nav-menu {opacity:1!important;}

    Try adding it to the site, e.g. via "Appearance -> Customize -> Custom CSS", clear all the caches, and let me know if it solves the issue or not.

    Please note: if there's browser caching enabled on site, it might take some time for your visitors (returning ones, not new ones) to actually see the effect.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.