tokonoma

@tuanphan but it makes the Site Title outside the Mobile Menu a solid background (and that needs to be transparent to accomodate for the gradient background). See, in this screenshot. There shouldn't be two shades of blue. So: – I need to target the mobile menu background overlay to be solid – I need to keep the Site Title bar transparent once you go back to the site

@tuanphan No, that's not it. Due to some transparency settings for the gradient background (I think), the main page content (Artist forward, purpose driven...) was appearing with the mobile menu (Our Expertise / How We Work / Meet Tamar / Contact). Then, I tried to add a solid background for the mobile menu (in red, for testing): BUT – that makes the Site Title when you leave the mobile menu, also red (when it needs to be transparent, to accomodate / scroll with the gradient background), as seen here: All I want to do is target the mobile menu and give it a solid background color (without it affecting the site title when you leave the menu options).

Any ideas? @tuanphan @CassAggett Thank you in advance

Thanks @tuanphan – I've extended! Let me know about the mobile menu overlay.

Just to follow-up / clarify – is there a way I can target the Menu Overlay on mobile to be a solid color (red screenshot), and keep the Title / Menu Bar transparent (second screenshot).

@CassAggett Thanks, the problem (still) is: the main page of the site is a long single scroll, and the background is a gradient that goes from light to dark. So, as soon as you scroll – it doesn't work (screenshot). I need the site title / menu bar on mobile to be transparent, but the the menu overlay (when you click +) to be solid.

@CassAggett thanks! I'm able to target the mobile menu overlay background color (see screenshots), but it also affects the menu / title bar on the rest of the site. I need the menu / title to still remain transparent, but have the mobile menu overlay be a solid color. Anyway to target this specifically? Like below? menuOverlayBackgroundColor

@tuanphan anything? In addition to my previous list of things that have changed with the form, there's now white backgrounds in the entry fields (they were transparent previously). the Submit button is a little black square (instead of h1, with an underline) First Name Last Name text is not my custom typeface Input font is not my custom typeface Input background is white, not transparent

@tuanphan No, to change slowly over a few minutes while on the site. If you linger on https://acca.melbourne/) for 2-3 minutes, the background color slowly changes color.

.form-wrapper{ padding:20px; } .title{ font-family:'CSB-Roma'!important; text-transform:uppercase; text-align:left; text-indent:0; color:#000000; font-style: italic; } .caption {font-family:'CSB-Roma'!important; text-transform:uppercase; font-size:10px; text-align:left; color:#000000;} .form-wrapper .field-list .field .field-element { font-family:'CSB-Roma'!important; border:none; border-bottom-style:solid; border-bottom-width:2px; border-color:#000000; } .button.sqs-system-button.sqs-editable-button{ font-family:'CSB-Roma'!important; letter-spacing:1px; background-color: none!important; } .sqs-block-form .field-list .title, .form-wrapper .field-list .fields .title, .form-wrapper .field-list .fields .description, .form-wrapper .field-list .fields .field, .form-wrapper .field-list .fields .field-error { font-family: 'CSB-Italic'!important; background-color: none!important; } .button.sqs-system-button.sqs-editable-button { font-family: 'CSB-Roma'!important; } div.form-block input:not([type="submit"]), div.form-block textarea { background-color: none!important; border: none !important; border-bottom: 2px solid black !important; color: black !important; } .field .caption .field-element { font-family : 'CSB-Roma'!important;; } /* Hide required on field titles */ .form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required { visibility: hidden; } .form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before { visibility: visible; content: "*"; font-family: 'CSB-Italic'!important; font-size: 1.5em; line-height: 1em; } .caption { font-family: 'CSB-Roma'!important; } /* Change the submit button colors */ .form-wrapper input[type=submit]{ background-color: none!important; color: transparent!important; font-size: 2rem!important; border-bottom: 2px solid black!important; margin-top: 5%; } .form-wrapper input[type=submit]:hover{ background-color: none!important; font-family : 'CSB-Italic'!important;; } This is the custom CSS I have inserted for the Form. Everything was styled correctly last week, but now, logged in and: the Submit button is a little black square (instead of h1, with an underline) First Name Last Name text is not my custom typeface Input font is not my custom typeface https://tuba-synthesizer-h36d.squarespace.com PW 12345

Incredible, thank you @tuanphan. #1 solved, + / hamburger is showing on mobile now. I figured out #3 on my own. And #4, I haven't attempted to code this, but on this website (https://acca.melbourne/) the background color changes slowly over time. Is this possible to replicate on Squarespace? Thanks again!

Hi! Thanks for your reply @CassAggett! The menu on mobile is working, but could you help with targeting the background color / removing the transparency on mobile menu using CSS? The default color method doesn't work for my site. In the screenshot, "Artist forward, purpose driven consulting" is the first section of the site, and should be hidden by a background.

@tuanphan any insights? 😬

Hello, https://tuba-synthesizer-h36d.squarespace.com (PW: 12345) On this site above, none of the CSS I've searched in the forum has worked to solve the following three issues in mobile: 1. The hamburger (or +) icon is invisible. If I tap the upper right corner, the menu appears, but cannot get the + icon to appear. I've tried the z-index hack. 2. The menu background is transparent for some reason. I'd like it to be blue. What do I target? 3. The site title is too large, and breaks into two lines on mobile. I've added CSS for this, but it's still showing up larger than the site font. Thank you in advance! Screenshots from an iPhone 13 Mini.

Hello, https://tuba-synthesizer-h36d.squarespace.com/ (PW: 12345) RE: MOBILE 1. The hamburger is missing from mobile view. How to re-add? I've tried some of the previous suggestions like, z-index, but it's still not showing. 2. Would like to customize the background color of the mobile menu, it's currently transparent. 3. The "italicized" fonts on desktop are the italic cut of my typeface, however, on mobile, it looks like it's being italicized. How to change this? RE: UNIVERSAL I'd like to have a dynamic background that slowly changes color like this site: https://acca.melbourne/ Is this possible on Squarespace? Let me know if you know the code. I'd use the gradient colors I have now, but change like the example. Thank you!!