krztff

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 😄

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

That worked perfectly. Thank you so much!

Hi, For a number of websites I created, I made a collapsible contact form to reduce the size. All of these worked perfectly, until this morning a client told me theirs wasn't working anymore. Suddenly, the contact form doesn't open up anymore when you press it. I've checked all of the websites where I added this feature and none of them are working anymore. This is quite weird, because everything was working perfectly a few weeks ago.. How they were made: 1. Code injection -> HEADER: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -> FOOTER: <!-- COLLAPSIBLE FORM SECTIONS --> <script> $('.form-item.underline').click(function() { $(this).nextUntil('.underline').slideToggle(); }); </script> 2. Custom CSS .form-item.underline:not(#section-1a3c12ba-77ef-4d49-aa85-f2e3ebbd50eb) ~ *:not(.form-item.underline) { display: none; } //To style first section title #section-1a3c12ba-77ef-4d49-aa85-f2e3ebbd50eb { pointer-events: none; } #section-1a3c12ba-77ef-4d49-aa85-f2e3ebbd50eb .title { font-weight: bold; text-transform: uppercase; } //To change cursor of clickable sections .form-item.underline:not(#section-1a3c12ba-77ef-4d49-aa85-f2e3ebbd50eb) { cursor: pointer; } //To style clickable section titles .form-item.underline:not(#section-1a3c12ba-77ef-4d49-aa85-f2e3ebbd50eb) .title { display: flex; font-weight: bold; justify-content: space-between; text-transform: uppercase; } .form-item.underline:not(#section-1a3c12ba-77ef-4d49-aa85-f2e3ebbd50eb) .title::after { content: '+'; color: #065774; font-size: 1.7em; font-weight: bold; } This is the code for one of the websites I did: https://www.makri.org/contact But other websites seem to have the same issue: https://www.electrifyeurope.be/contact https://www.lccoaching.be/contact-intro https://www.anouschkameuris.be/contact https://caribou-gopher-2ez7.squarespace.com/ (pw: INTUNE) Does anyone know how to solve this problem? Thanks in advance!

@tuanphan do you have a solution to remove the mobile information bar when the overlay menu is opened? Thanks in advance!

@tuanphan I've got the same problem and I'd like to just hide the mobile information bar when the overlay menu is open. Do you have any advice? Thanks a lot!