Unable to edit page content due to Mega Menu blocking the page

Site URL: https://ttmspa.com

Hello! I am hoping someone can help me with an issue that has appeared on my website for the past few months.

When I attempt to edit a page, the mega menu appears and I can only edit the mega menu. Any page content beneath is blocked and does not respond to any mouse pointer movements. The current workaround is to remove the mega menu code, edit the page, and then re-insert the code. I have attached a video and screenshots showing the issue.

I originally thought it was my web browser not displaying the editor properly, but the same behaviour exists on different browsers and operating systems. 

Below is the code for the mega menu.

<script>
  $('.header-nav-folder-title[href^="/mega-"]').each(function() {
    var link = $(this).attr('href');
    var idName = link.slice(6);
    $(this).parent().addClass('mega-menu');
    $(this).parent().after('<div id='+idName+' class="mega-menu-item"></div>'); 
    $('#'+idName).load('/mega-page-' + idName + ' #page',function(){
      window.Squarespace.initializeLayoutBlocks(Y);
    });
  })
</script>

This issue first appeared a few months ago, and before then, page content was editable without the mega menu causing an issue. Any help would be greatly appreciated. Thank you!

Add this code to Design > Custom CSS to remove mega menu on Edit Mode Only

/* hide mega menu edit mode */
body.sqs-edit-mode div.mega-menu-item {
    display: none !important;
}

13 hours ago, tuanphan said:

Add this code to Design > Custom CSS to remove mega menu on Edit Mode Only

/* hide mega menu edit mode */
body.sqs-edit-mode div.mega-menu-item {
    display: none !important;
}

 

Hello! Thank you for your response. I added the code to Design > Custom CSS, but I still cannot edit the page content. However, the mega menu does not appear anymore...

The edit UI that appears also doesn't do anything, see the attached screenshot.

Here is the code that appears in Design > Custom CSS:

/* hide mega menu edit mode */
body.sqs-edit-mode div.mega-menu-item {
    display: none !important;
}

a{
    background-image:unset !Important;
}
.sqs-block-button-element:hover {box-shadow: 0px 2px 5px rgba(0,0,0,.3)}
.Index-page:first-child .sqs-layout, .Intro .sqs-row 
{
  -webkit-animation: fade-text-anim 2s ease;
  animation: fade-text-anim 2s ease;
}

.header--menu-open .header-menu-nav-item {margin-top:5px}

.header--menu-open .header-menu-nav-item {margin-bottom:5px}


//Mega Menu CSS
@menuBG: #eee;
@menuTextColor: #000;
@menuLinkColor: #000;

.mega-menu-item {
  width: 100%;
  position: absolute;
  opacity: 0;
  left: 0;
  visibility: hidden;
  bottom: 1px;
  pointer-events: none;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  min-height: initial!important;
  -webkit-transition: visibility 0s linear .3s, opacity .3s linear;
  -o-transition: visibility 0s linear .3s, opacity .3s linear;
  transition: visibility 0s linear .3s, opacity .3s linear;
  line-height: 1.8;
  &:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 1px;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    left: 0;
    background: transparent;
    z-index: -1;
  }
  a {
    display: initial;
    color: @menuLinkColor!important;
  }
  h1,h2,h3,h4,h5,h6,p {
    color: @menuTextColor!important;
  }
  .page-section {
    min-height: unset!important;
  }
  .content-wrapper {
    padding-top: 3.3vmax!important;
    padding-bottom: 3.3vmax!important;
  }
  .section-background {
    background-color: @menuBG!important;
  }
}
.mega-menu:hover {
  & + .mega-menu-item {
    opacity: 1;
    visibility: visible;
    pointer-events: auto!important;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
  }
}
.mega-menu-item:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto!important;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  & * {
    pointer-events: auto;
  }
}
.header-nav-item,
.header-title,
.header-actions {
  z-index: 3;
  position: relative;
}
.header::before,
.header-background {
  pointer-events: none!important;
}
.mega-menu .header-nav-folder-content {
  display: none;
}
.header-display,
.header-inner {
  position: static!important;
}
//header alignment 
.header-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: initial!important;
}
.header-layout-nav-right .header-nav {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-flex: unset;
  -ms-flex-positive: unset;
  flex-grow: unset;
}
.header-layout-nav-center .header-nav {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 34%;
  flex: 1 1 34%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
  -webkit-box-flex: unset;
  -ms-flex-positive: unset;
  flex-grow: unset;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
//Mega Menu CSS
@menuBG: #fff;
//End Mega Menu CSS

On 7/15/2021 at 4:47 AM, ZoSkinJon said:

Hello! Thank you for your response. I added the code to Design > Custom CSS, but I still cannot edit the page content. However, the mega menu does not appear anymore...

The edit UI that appears also doesn't do anything, see the attached screenshot.

Here is the code that appears in Design > Custom CSS:

/* hide mega menu edit mode */
body.sqs-edit-mode div.mega-menu-item {
    display: none !important;
}

a{
    background-image:unset !Important;
}
.sqs-block-button-element:hover {box-shadow: 0px 2px 5px rgba(0,0,0,.3)}
.Index-page:first-child .sqs-layout, .Intro .sqs-row 
{
  -webkit-animation: fade-text-anim 2s ease;
  animation: fade-text-anim 2s ease;
}

.header--menu-open .header-menu-nav-item {margin-top:5px}

.header--menu-open .header-menu-nav-item {margin-bottom:5px}


//Mega Menu CSS
@menuBG: #eee;
@menuTextColor: #000;
@menuLinkColor: #000;

.mega-menu-item {
  width: 100%;
  position: absolute;
  opacity: 0;
  left: 0;
  visibility: hidden;
  bottom: 1px;
  pointer-events: none;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  min-height: initial!important;
  -webkit-transition: visibility 0s linear .3s, opacity .3s linear;
  -o-transition: visibility 0s linear .3s, opacity .3s linear;
  transition: visibility 0s linear .3s, opacity .3s linear;
  line-height: 1.8;
  &:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 1px;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    left: 0;
    background: transparent;
    z-index: -1;
  }
  a {
    display: initial;
    color: @menuLinkColor!important;
  }
  h1,h2,h3,h4,h5,h6,p {
    color: @menuTextColor!important;
  }
  .page-section {
    min-height: unset!important;
  }
  .content-wrapper {
    padding-top: 3.3vmax!important;
    padding-bottom: 3.3vmax!important;
  }
  .section-background {
    background-color: @menuBG!important;
  }
}
.mega-menu:hover {
  & + .mega-menu-item {
    opacity: 1;
    visibility: visible;
    pointer-events: auto!important;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
  }
}
.mega-menu-item:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto!important;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
  & * {
    pointer-events: auto;
  }
}
.header-nav-item,
.header-title,
.header-actions {
  z-index: 3;
  position: relative;
}
.header::before,
.header-background {
  pointer-events: none!important;
}
.mega-menu .header-nav-folder-content {
  display: none;
}
.header-display,
.header-inner {
  position: static!important;
}
//header alignment 
.header-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: initial!important;
}
.header-layout-nav-right .header-nav {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-flex: unset;
  -ms-flex-positive: unset;
  flex-grow: unset;
}
.header-layout-nav-center .header-nav {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 34%;
  flex: 1 1 34%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
  -webkit-box-flex: unset;
  -ms-flex-positive: unset;
  flex-grow: unset;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
//Mega Menu CSS
@menuBG: #fff;
//End Mega Menu CSS

 

I Think we will need to check code in edit mode. Can you duplicate the site & add me as a contributor? I can take a look

On 7/16/2021 at 2:50 AM, tuanphan said:

I Think we will need to check code in edit mode. Can you duplicate the site & add me as a contributor? I can take a look

I am unable to duplicate my website as it gets stuck on 'copying content'. Are you able to take a look without duplicating?

On 7/24/2021 at 7:11 AM, ZoSkinJon said:

I am unable to duplicate my website as it gets stuck on 'copying content'. Are you able to take a look without duplicating?

If you can add me as a contributor, I can take a look

After reading that the "display: none;" CSS rule did not work, it is most likely an issue with the z-index of the mega menu content in edit mode. You might need to add a CSS rule that makes the z-index -1 in edit mode, in addition to "display: none;"