Mobile menu overlay Squarespace 7.1

Site URL: https://www.leadwithbliss.com

Hello! I have added custom code to www.leadwithbliss.com (password: leadwithbliss), implemented in Squarespace 7.1, to overlay the mobile nav menu on the header banner image. I managed to achieve that with the following code:

.header-display-mobile {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
}

However, I run into an issue upon scroll: the nav folder does not appear upon click of the hamburger menu (see attached screen shot - notice the 'x', indicating that the folder is open).

I suspect I am missing something fairly obvious with respect to bringing that element forward using position/z-index values but I can't quite seem to figure it out.

Does anyone have any suggestions on how to fix this? 

Thanks in advance for your help!

Hi,

Why you use this code?

.header-display-mobile {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
}

" overlay the mobile nav menu on the header banner image"

Can you explain in detail this?

@tuanphan Yes so I had found this thread in which you provided a suggestion on how to achieve this look in the brine template on 7.0, I thought I would see if I could get it to work in 7.1

On 8/28/2021 at 5:14 AM, stellaehabib said:

@tuanphan Yes so I had found this thread in which you provided a suggestion on how to achieve this look in the brine template on 7.0, I thought I would see if I could get it to work in 7.1

You mean transparent header on mobile only?

@tuanphan yes correct 🙂 it already appears that way on desktop, by default.