Jump to content

Menu-block makes other sections "glitch"

Recommended Posts

Hi all,

I was working on a website for a client. For the "pricing" page, I've added a menu-block to the section. I've added some CSS to the menu-block and everything seems to work fine within this section.

Yet, all sections below this section start to glitch. All the text becomes bold, the spacing can't be adjusted anymore, blocks can't be added or deleted and even the section itself can't be deleted. Whenever I remove the the section that holds the pricing menu, the problem with the other sections dissapears. 

I've tried adding the section that holds the menu-block as the last part of that page, but still everything changes once I add this specific section. I tried reaching out to the Squarespace help desk, because I think this might be some sort of glitch. They told me that the problem might be in the CSS code that I've used, but that seems quite unlikely to me since I've only targeted the .menu-block items.

Is there any way I can work around this problem or can anyone find the mistake I've made that's causing this problem?

Thanks a lot for the help!

This is the page I'm referring to.

And this is the CSS I've used for the .menu-blocks/

// MENU EDITS //

.menu-block .menu-selector {
    padding-top: 1.5em !important;
}

.menu-block .menu-item {    
padding-bottom: 4em !important;
}

.menu-block .menu-section+.menu-section {
    margin-top: 3em !important;
}

.menu-section-title {
text-align: left !important;
  font-size: 1.5rem !important;
  font-weight: bold;
  color: #221e19 !important;
}

.menu-block .menu-selector label.menu-select-labels--active {
   background-color: #221e19 !important;
   color: white;   text-decoration: none;
  border-radius: 30px;
}

.menu-select-labels {  background-color: #F1F0E9 0%; 
border-color: #221e19;
  border-style: solid;
  border-width: 1px;
  color: black; font-size: 15px   !important; text-transform: uppercase; cursor: pointer;  padding: 12px 20px !important;   margin: 8px;
border-radius: 30px;
}

.menu-item-price-top {
font-style: italic !important;
}

.menu-item-description {
  font-size: 0.8rem !important;
font-style: italic !important;
  padding-right: 30px;
  padding-bottom: 0px;
}

.menu-block { 
background: transparent; 
  border: 1px solid black;
  border-radius: 30px;
padding: 2rem; 
  transition: 400ms ease-in-out;

}

.menu-block:hover {
transform: scale(1.01); 
     transition: 400ms;  
background: transparent;  
} 

// MOBILE EDITS //

@media only screen and (max-width: 640px) {
  .menu-block {
    border-radius: 30px;
  padding: 0.2rem;
}
  
 .menu-block .menu-item {    
padding-bottom: 1em;
}
  
 .menu-items {
  padding-left: 1em;
  padding-right: 1em;
}
  
.menu-section-title {
  padding-left: 0.6em;
  padding-right: 0.6em;
}
}

// END MOBILE EDITS //

// LINK EDITS // 

.menu-block .menu-item a {
 border: 1px solid #000;
 background: transparent;
 color: #333;
     padding: 0.5rem 1.5rem 0.5rem 1.5rem;
   border-radius: 30px;
    transition: all .3s ease-in-out;
    font-weight: bold;
}

.menu-block .menu-item a:hover {
 border: 1px solid #000;
 background: transparent;
  color: #000;
  border-radius: 30px;
   padding: 0.5rem 2.5rem 0.5rem 1.5rem;
  transition: all .3s ease-in-out;
}

// END LINK EDITS //

// END MENU EDITS //

 

Link to comment
  • Replies 3
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

4 hours ago, tuanphan said:

There is a b tag you forgot to fill in the closing tag

Each tag  will include opening tag, eg: <b>

and closing tag </b>

If you do not include closing, that tag will affect all elements immediately after it

 

Thanks for the reply @tuanphan! I've closed the <b> tags, yet nothing really changed. I was able to change remove the font weight of the sections below by targetting the block and setting the font-weight to "normal". But this still leaves me with the spacing problem or the disability to add, remove or change blocks within the sections below. If you have any feedback, I'll gladly hear it! Thanks a million 😄

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.