Gonz

Found out why it disappeared. The 'margin' properties of the menu image had a value of '0 auto'. Must have been an accidental key press. However! Had a second problem where the logo was now visible from the Squarespace site building page but it wasn't visible when viewing the site externally. When removing the buttons the logo reappears. So, basically, the menu is too cluttered and Squarespace eliminates the logo to free space. All in all, the code for adding a second button works perfectly, Creedon, thank you. I'm going to have to adjust my menu design in order to fit all the items I need.

I don't know what happened but the logo suddenly disappeared... I'm working on fixing that.

Hello, Creedon. It worked! I'm amazed! It took me quite a while to understand the procedure, but I finally did it. Thank you! Now I need to syle the menu a little. Could you also help me with that? I need to change the elements order and the buttons size and gap between them. This is how the menu currently looks like (the cut part is because of the trail period banner at the bottom): If I try to move the social icons up and the logo down it ends up like this as if the buttons were attached to the social links: Outside the edit view, the logo gets smaller as the screen gets shorter until it disappears. Is there a way to lock it? This is all the code I'm currently using for the whole mobile menu (the last part, starting with "botones extra" is for the second button you just helped me add): /* // MENÚ MÓVIL // */ /* Subrayado de navegación */ .header--menu-open :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content { color: #D7A3FF !important; background-image: none !important;} /* Quitar logo header*/ @media screen and (max-width: 641px){.header-title a { display: none !important; }} /* Imagen de Fondo */ .header-menu .header-menu-bg{ background-image: url(https://static1.squarespace.com/static/66355e9431bd626b9099b9e1/t/663e6f22d26f5249175db0cc/1715367714273/Fondo+Men%C3%BA.png); background-size: cover;} /* Separación de navegacion */ .site-wrapper .header-menu .header-menu-nav a:not(.btn) { height: 20vw !important; font-size: 30px;} /* Agregar logo */ [data-folder="root"]:before { content: ""; background-image: url(https://static1.squarespace.com/static/66355e9431bd626b9099b9e1/t/663e7c3b7e741468c18cc5cb/1715371067108/Mesa+de+trabajo+%E2%80%93+1.png); display: block; width: 300px; background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 auto; order: 2;} /* Iconos redes sociales */ .header-menu-actions .icon--lg { width: 30px;} /* Orden redes sociales */ .header-menu-nav-folder-content { order: 1;} /* Botones extra */ // space between buttons @gap : 0.5rem; .direction-order (row, normal); // NO TOCAR!!! // #siteWrapper .header .header-actions-action--cta .sqs-button-element--primary { align-self : center;} .header .header-actions-action--cta, // desktop .header-menu-cta // mobile { display : -webkit-box; display : -ms-flexbox; display : flex; -webkit-box-orient : @d3; -webkit-box-direction : @d2; -ms-flex-direction : @d1; flex-direction : @d1; grid-gap : @gap; gap : @gap;} // desktop .header .header-actions-action--cta { text-align : center;} @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .header .header-actions-action--cta { display : none;}} // begin mobile .header-menu-cta { justify-content : center;} @media screen and ( max-width : 575px ) { .header-menu-cta { -webkit-box-orient : @d6; -webkit-box-direction : @d5; -ms-flex-direction : @d4; flex-direction : @d4;}} .header-menu-cta a { margin-left : auto; margin-right : auto;} // begin direction mixins // desktop // direction row, normal .direction-order ( @d, @o ) when ( @d = row ) and ( @o = normal ) { @d1 : row; @d2 : normal; @d3 : horizontal;} // direction row, reverse .direction-order ( @d, @o ) when ( @d = row ) and ( @o = reverse ) { @d1 : row-reverse; @d2 : reverse; @d3 : horizontal;} // direction column, normal .direction-order ( @d, @o ) when ( @d = column ) and ( @o = normal ) { @d1 : column; @d2 : normal; @d3 : vertical;} // direction column, reverse .direction-order ( @d, @o ) when ( @d = column ) and ( @o = reverse ) { @d1 : column-reverse; @d2 : reverse; @d3 : vertical;} // mobile // direction column, normal .direction-order ( @d, @o ) when ( @o = normal ) { @d4 : column; @d5 : normal; @d6 : vertical;} // direction column, reverse .direction-order ( @d, @o ) when ( @o = reverse ) { @d4 : column-reverse; @d5 : reverse; @d6 : vertical;} // NO TOCAR!!! // /* Quitar botones header desktop */ .header-actions .header-actions-action--cta { Thanks! 🙂

Hi! I'd like to just add them to the mobile menu when it's open, not to the header itself. When it's closed I just want the hamburger to be visible. I even hid the header logo from the mobile view in order to add another one at the bottom of the menu itself. This is what I'm trying to achieve: So far, this is what I've got (using the button available from the header menu): Maybe there is a way to duplicate the button and be able to change the text and link? Or it might be easier to insert both buttons through code. Thank you. 🙂

Hello, everyone. I'm trying to add two buttons only to the mobile menu. So far, I've tried all the codes I could find in other discussions but haven't been succesful. I've also tried inserting a text block with code but got stuck on the link part, so at the end I didn't even tried to add the second button. Currently I'm using the only button available from the header options (will hide it from the desktop site later), but I'm still in need of the second one. This is the site's url (I hope): https://octahedron-pepper-rbe4.squarespace.com/ The password is: 12345 Thanks. 🙂

I also found out I messed up a little. Apparently, the code for the hover part as I published it only worked on my blank canvas & not on my real website. The full code along with the new hover section is this one: .sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button { color: #c9c9c9 !important; background-color: #1e1e1e !important; font-family: Anita !important; font-size: 10px; text-transform: uppercase !important; border: 2px solid #c9c9c9 !important; } .sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button { transition: all .6s ease 0s !important; } .prim.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button:hover {color: #1e1e1e !important; background-color: #c9c9c9 !important;} This tells me that not all of it will be useful for everyone. You might need to change the .sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button and .prim.sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button:hover parts of the code specific to your page.

Hello, Cass. Thank you for answering. It's sad to know that it will happen from time to time, but at least I think I've learned enough to solve the problems somewhat by myself. At least I hope this post can help others in their journey with Squarespace.

Hello, everyone! I've been working on my page for almost a month, and while tweaking some of the last things I found out that the CSS code I had to customize a contact form is no longer working properly. The code for the form submit button is the one that just stopped working. .form-wrapper input[type=submit] { color: #c9c9c9 !important; background-color: #1e1e1e !important; font-family: Anita !important; font-size: 10px; text-transform: uppercase !important; border: 2px solid #c9c9c9 !important; } .form-wrapper input[type=submit] { transition: all .6s ease 0s !important; } .form-wrapper input[type=submit]:hover {color: #1e1e1e !important; background-color: #c9c9c9 !important;} I created a new website just to try that original code by itself and it just doesn't work anymore. I also tried making a copy of my website and restoring all color, font and button options to default and leaving just the code for the submit button and it also doesn't work anymore. I read in another discussion that it may be Squarespace's problem. So it makes me wonder. Does this happen regularly? Should I be scared that at any moment my code will just stop working and I'll have to redo everything? After trying all evening I think I solved the problem by changing the .form-wrapper input[type=submit] part of the code to .sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button in the first two blocks, and with .primary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--primary:hover for the hover section of the code. Basically the new code would look like this: .sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button { color: #c9c9c9 !important; background-color: #1e1e1e !important; font-family: Anita !important; font-size: 10px; text-transform: uppercase !important; border: 2px solid #c9c9c9 !important; } .sqs-block-form .sqs-editable-button.sqs-button-element--primary, .site-wrapper .sqs-block-form .sqs-editable-button { transition: all .6s ease 0s !important; } .primary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--primary:hover {color: #1e1e1e !important; background-color: #c9c9c9 !important;} Making the button change from A to B, as it should. Don't mind the language. I'm not an expert in this, I just started and this is my first website, so I'm not sure if this is a correct or permanent way of soliving the problem/coding or if it even will work for everyone. I used the Google dev tools to get the new elements for the code and I tried it in both my site, with all the rest of my code, and with a new site I used as a canvas to experiment. Has any of you ever encountered this problem? Is there a way to fix it? Thank you everyone! 🙂

Oh. Don't know what happened. It kinda got uploaded twice and the first one got messed up. Doesn't matter it was the same as the this one:

Hi, tuanphan. Sorry for the late reply. I found out I was doing everything terribly wrong and it took me a while to get to where I was again. I finally managed to solve the riddle using two gallery/banner sections and code to hide one of each sections in each screen size. Here's the section I used. And here's the code, in case it helps anyone else. You'll need the 'Squarespace ID Finder extension' and replace the " section[data-section-id="YOUR-SECTION-ID"] " text with your section ID. // Hiding sections on mobile @media screen and (max-width: 641px) { section[data-section-id="YOUR-SECTION-ID"] { display:none !important; } } // Hiding sections on desktop @media screen and (max-width: 641px) { section[data-section-id="YOUR-SECTION-ID"] { display:none !important; } } Thanks for your help, tuanphan! Hope this can be of help to someone else. 🙂

Hello, everyone! I just started using Squarespace yesterday, so I'll try my best to explain clearly. As the title states, I'm trying to add a section made entirely from a carousel, with each slide taking the whole screen. This I can do easily. The problem comes with the fact that I need each slide to have two images, side by side. I need this in order to be able to arrange all the elements for the mobile version. I'll add a little sketch to show the overall structure, divided in two sections. The red margin would be the visible screen, one would need to scroll down to get to the carousel, with each slide having two elements each, arranged side to side for the desktop size, and vertically for the mobile size. I'll also include two dummy prototypes I made in XD to help better illustrate what I'm trying to achieve. Desktop size: https://xd.adobe.com/view/9533f2a3-6f16-4d8f-8767-b967d4529691-c060/?fullscreen Mobile size: https://xd.adobe.com/view/abd5feab-314a-48de-85f0-578f33219bbf-fe86/?fullscreen I really have no idea if what I'm trying to do is even possible. I believe it is, but I might be wrong. I would love if someone could point me in the right direction. Thank you everyone. 🙂