Search code examples
cssz-index

My mobile menu is being hidden by page content


Page content is covering the mobile menu on our site. Make your browser smaller, if needed, to see the problem.

I searched quite a bit and read a bunch of forum posts, so, I've tried playing with z-index and position:relative and I deleted a body tag with overflow-x:hidden, but I am not getting any results.

Here is the CSS I am currently using

.cshero-mobile-menu  { position:relative; z-index:20000; }
.cshero-mobile-menu a { position:relative; z-index:21000; }
.cshero-mobile-menu span { position:relative; z-index:22000; }
.article * {position:relative; z-index:1000;}

Can anyone see what I am doing wrong and advise me how to fix it?

Thank You!


Solution

  • Add the following z-index rule to fix your issue:

    #cs-header-custom-bottom .container {
        …
        z-index: 11;
    }
    

    enter image description here