Jump to content

Mobile menu overlay Squarespace 7.1

Recommended Posts

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!



Screen Shot 2021-08-24 at 3.13.15 PM.png

Link to comment
  • Replies 4
  • Views 775
  • Created
  • Last Reply

Top Posters In This Topic

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.