Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


ZoSkinJon

Question

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!

Screen Shot 2021-07-13 at 10.31.12 PM.png

Screen Shot 2021-07-13 at 10.31.20 PM.png

Link to comment

5 answers to this question

Recommended Posts

  • 1

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1
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

 

Screen Shot 2021-07-14 at 5.44.56 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

 

Screen Shot 2021-07-14 at 5.44.56 PM.png

Link to comment
  • 0
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?

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...