one-over-four

Hi @tuanphan, I've tried personalising the Custom CSS you shared above. I need to change the font colour of all copy layered ontop of the header image on the following pages to #6E5C55 on mobile: https://studiotahini.squarespace.com/mentoria-personalizada https://studiotahini.squarespace.com/presets https://studiotahini.squarespace.com/blog/estilismoculinario/beige https://studiotahini.squarespace.com/blog/receta/bizcocho https://studiotahini.squarespace.com/blog/portfolio/flaxkale Please could you share with me all Custom CSS that I need to add for this, please? Thanks, Christopher

Hi @tuanphan, Are you able to share the custom code for Option 2 now? Thanks, Christopher

Hi @tuanphan, As you can see in the attached image, there's still a couple issues: The field font is brown, not #FFFFFF The input font is so small you can't even see it What needs to change in the code to make these updates?

It should now work @tuanphan, once cache has been cleared.

Hi @tuanphan, When you go down to the form (see attached image), there's a couple issues: Some of the copy appears in brown when it should be #FFFFFF When you add a value in the field (the Nombre box, for instance), you can't see the copy. It's too small. Thanks, Christopher

Hi @tuanphan, Can you clear your cache? It's live for several other people looking at it. Otherwise, you can access the site with this URL: https://studiotahini.squarespace.com/blog. And delete the /blog slug to get to the homepage. Thanks, Christopher

Hi @tuanphan, When you enter text into the input field, the font cannot be read. Below is the full CSS code on the site: Thanks, Christopher @font-face { font-family: Magazine Grotesque Regular; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be0ac85137ed005ab8/1713250495434/Magazine-Grotesque-Regular.otf); } @font-face { font-family: Magazine Grotesque Semi Bold; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be321c6f50f450ef17/1713250495145/Magazine-Grotesque-SemiBold.otf); } @font-face { font-family: Creation; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/666c51b24017d62b1f603b79/1718374834896/Creattion.otf); } h1 {font-family: 'Magazine Grotesque Regular';} h2 {font-family: 'Magazine Grotesque Regular';} h3 {font-family: 'Creation';} h4 {font-family: 'Creation';} p.sqsrte-large {font-family: 'Magazine Grotesque Regular';} p {font-family: 'Magazine Grotesque Regular';} p.sqsrte-small {font-family: 'Magazine Grotesque Regular';} h1 { font-family: 'Magazine Grotesque Regular'; font-weight: 500; font-style: regular; font-size: 55px; letter-spacing: -0.01em; text-transform: ; line-height: 1.25em; } h2 { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 32.5px; letter-spacing: -0.01em; text-transform: ; line-height: 1,25em; } h3 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 60px; letter-spacing: -0.01em; text-transform: ; line-height: 1em; } h4 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 50px; letter-spacing: -0.0em; text-transform: ; line-height: 1,15em; } .sqsrte-large { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 20px; letter-spacing: 0.0em; text-transform: ; line-height: 1.25em; } p { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 17px; letter-spacing: 0.0em; text-transform: ; line-height: 1.50em; } .sqsrte-small { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 14px; letter-spacing: 0.0em; text-transform: ; line-height: 1.0em; } .Marquee * { font-family: Magazine Grotesque Regular; color:#333333; font-size: 18px; } .form-wrapper .field-list .title { font-family: Magazine Grotesque Regular; font-size: 13px; font-weight: 700; color: #ffffff; letter-spacing: .15em; text-transform: ; } #siteWrapper.site-wrapper .sqs-block-button-element { font-family: "Magazine Grotesque Regular" !important; } a.btn { font-family: Magazine Grotesque Regular !important; } .header-nav *, nav.header-menu-nav-list * { font-family: Magazine Grotesque Regular; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0.03em; text-transform: ; line-height: 1em; } #collection-666c4e1b283cfc6d247cbc42 { //nav button color #header .sqs-button-element--secondary { background: #F3F0EC !important; color: #6E5C55 !important; font-family: Magazine Grotesque Regular; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0.03em; text-transform: ; line-height: 1em; } } #collection-666c6b4a2b5bc96a1e9e34f3 { //nav button color #header .sqs-button-element--secondary { background: #F3F0EC !important; color: #6E5C55 !important; font-family: Magazine Grotesque Regular; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0.03em; text-transform: ; line-height: 1em; } } #collection-663bc860911fd76b92ffc196 { //nav button color #header .sqs-button-element--secondary { background: #F3F0EC !important; color: #6E5C55 !important; font-family: Magazine Grotesque Regular; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0.03em; text-transform: ; line-height: 1em; } } #collection-666c4e1b283cfc6d247cbc42 { // header background #header { background: #292929 !important; opacity: 0.65 !important; } } #collection-666c6b4a2b5bc96a1e9e34f3 { // header background #header { background: #292929 !important; opacity: 0.5 !important; } } #collection-663bc860911fd76b92ffc196 { // header background #header { background: #292929 !important; opacity: 0.5 !important; } } div.form-block * { font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; color: #F3F0EC; } /* Dropdown auto width */ .header-nav-folder-content { width: auto !important; min-width: unset !important; margin-top: 15px; border-radius: 10px; } .header-nav-folder-content * { font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 2em; color: #6E5C55; } footer.sections input, footer.sections input::placeholder { color: #6E5C55 !important; font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; color: #F3F0EC; border-radius: 10px; opacity: 0.9; } footer.sections .newsletter-block button { background-color: red !important; opacity: 1 !important; color: #6E5C55 !important; font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; } footer.sections .newsletter-block button * { color: #F3F0EC !important; } /* Hide items: 4, 5, 6, 7... from Left Menu */ .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) { display: none; } /* Hide items: 1, 2, 3 from Right Menu */ .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) { display: none; } /* set space between menu items */ .header-nav-item:nth-child(n+4) { margin-right: 2.5vw; } /* Move Right Menu from Right of button to Left of Social */ div.header-actions nav.header-nav-list { order: 1 !important; flex-wrap: nowrap; } div.header-actions-action { order: 2 !important; } /* Equal space between right nav items, social icons, button */ div.header-actions-action--cta { margin-left: 2.5vw !important; } div.header-actions-action--social a { margin: 0 !important; margin-left: 2.5vw !important; } div.header-actions nav.header-nav-list div:last-child { margin-right: 0px !important; }

Hi @tuanphan, In terms of positioning of the links, that has worked. However, the font styles need now updating. How do I do that? Thanks, Christopher

@Lesum Is it possible to have a drop-down menu at the top of the page, where the user can filter on the tags? If so, how do I add that drop-down menu on the page?

Hi @Earvin, Is this a different solution to the one @Lesum recommended? Thanks, Christopher

Hi @Beyondspace, I've tried a few variations of the code supplied in that thread but they don't work on my site. Are you or @tuanphan (the support on the original post) able to provide this? Thanks, Christopher

Hi @tuanphan, I've added the code above and been able to change the style of the input field and button. When I enter a value into the input field though, the font is illegible (see attached image). How do I format the font here? Thanks, Christopher

Hi @tuanphan, The page should have been enabled (see attached image!) Thanks, Christopher

Hi @tuanphan, The page has been enabled (see attached image)! Thanks, Christopher

Hi @tuanphan, Page URL: https://studiotahini.squarespace.com/ I'd like to do the same on my site, however, with 3 on the left and 2 on the right (next to the Contact button). Would you be able to supple the Code for this, please? Thanks, Christopher