wildflowertides

Hi! I'm trying to add a title to my Gallery, and I've been able to do it okay, but I want it to look like the animated title for my desktop version, and I'm not seeing any way to edit the text to do so. In the below image, you'll see "Our Work" with a green drawn circle animation (this is what I want) and then "Our Work" below it that is plain. How do I make the plain look like the animated version? Furthermore, I've installed custom bullets (image type) via CSS. However, I'm still seeing the standard dot bullet points intermittently while I'm editing. Is this behavior normal or is there a way to prevent it? @tuanphan Maybe you have some ideas? Site URL: https://springtail-coyote-2gnb.squarespace.com/home Site Password: squarespacehelp Gallery Title Code: section[data-section-id="6653662cc2a07e35f42e6d12"] .content-wrapper:before { content: ''; color:#000; text-align: center; padding: 40px 0; font-size: 2em; } section[data-section-id="6653662cc2a07e35f42e6d12"] .content-wrapper { flex-direction: column; } section[data-section-id="6653662cc2a07e35f42e6d12"]::before { content: 'Our Work'; color:#000; font-size: 4.5em; font-weight: 700; display:block; width:100%; height:100px; position: absolute; top:0; z-index:1; margin:auto; text-align:center; line-height: 80px Bulletpoint Code: ul[data-rte-list] li>*:first-child::before { content: ""; } #block-f93d5a1914d70fd60541, #block-yui_3_17_2_1_1716681074846_60832 ul, li { list-style-type: none; } #block-212501fe4e660f6a5dfb,#block-yui_3_17_2_1_1716681074846_60832 ul, li { list-style-type: none;} #block-212501fe4e660f6a5dfb .sqs-block-content li:before { content: ''; display: block; height: 30px; position: relative; top: 38px; left: -40px; width: 30px; background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png); background-size: contain; margin-right: 5px; } #block-f93d5a1914d70fd60541 .sqs-block-content li:before { content: ''; display: block; height: 30px; position: relative; top: 38px; left: -40px; width: 30px; background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png); background-size: contain; margin-right: 5px; } #block-c156a929be894344c15b .sqs-block-content li:before { content: ''; display: block; height: 30px; position: relative; top: 38px; left: -40px; width: 30px; background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png); background-size: contain; margin-right: 5px; } .accordion-item__description li:before { content: ''; display: block; height: 30px; position: relative; top: 38px; left: -40px; width: 30px; background-image: url(https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png); background-size: contain; margin-right: 5px; } li(inset a right-pointing angled bracket here)*:first-child::before{content:"https://static1.squarespace.com/static/652603744296862141add132/t/6650e88f3e0f2c6062a82ec8/1716578448054/CheckListBullet.png"!important}

Sorry about that! https://corn-guitar-kkre.squarespace.com/portfolio

Hi, I am trying to change my header button style on just 1 page. I would like the button to be white to account for the orange background on the portfolio page only. Password: wildgrowth

Hi! I'm trying to target a specific block to add a border on the left side. I have done block-specific several times on other sites but this one doesn't seem to be working. What am I do wrong? //Start: Header Border #block-yui_3_17_2_1_1709491059499_10305 [border-left: 1px solid black] //End: Header Border

If you can offer help on this navigation issues, I would love some! She really likes the icon look! This was the last code I tried. The dropdown on the Services icon were blank and I wanted them visible. /*BASIC STYLES FOR ALL LINKS*/ .header-nav-item a::before, .header-menu-nav-item a::before { content: ''; height:35px; width: 35px; background-size: contain !important; background-repeat: no-repeat !important; vertical-align: middle; margin-right: 2px; margin-left: 0px; display: inline-block; } .header-nav-item--active a { background-image: none !important;} // hide titles .header-nav-item a, .header-menu-nav-item a { font-size:0px;} .header-nav-folder-item-content, .header-nav-folder-item .header-nav-folder-item--external {font-size:1rem !important;} // Rearrange navigation .header-display-desktop { align-items: flex-start; } .header-layout-branding-center-nav-center .header-title-nav-wrapper { margin-right: auto; margin-left: 25%; } .header-layout-branding-center-nav-center .header-actions--left { order: 2; } .header-nav-item:nth-child(1) a::before, .header-menu-nav-item:nth-child(1) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3444a0033485e6ad57e/1694954308502/1.png'); height:27px; width: 27px; } .header-nav-item:nth-child(2) a::before, .header-menu-nav-item:nth-child(2) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f356f41ef323763d12c5/1694954326374/2.png'); } .header-nav-item:nth-child(2) a, {color:#E205C1} .header-nav-item:nth-child(3) a::before, .header-menu-nav-item:nth-child(3) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3604a0033485e6adcce/1694954336586/3.png'); height:27px; width: 27px;} .header-nav-item:nth-child(4) a::before, .header-menu-nav-item:nth-child(4) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f36c93d8ad20f6e22974/1694954348335/4.png'); } .header-nav-item:nth-child(5) a::before, .header-menu-nav-item:nth-child(5) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f94fdfdcbc12f579aed0/1694955855403/7.png'); } .header-nav-item:nth-child(6) a::before, .header-menu-nav-item:nth-child(6) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f383b8b21d565fa09cb4/1694954371771/6.png'); height:30px; width: 30px; } I'm also having a new issue with custom fonts not appearing. I got a new MacBook Pro with SonomaOS and I am not seeing my fonts in Safari, Chrome or Vivaldi that were appearing fine on Windows Chrome, Firefox and Edge. Should I make a new thread for that issue too? @font-face {font-family: 'Owerstinn'; src:('https://static1.squarespace.com/static/6515e150efa4b86d81f0cd80/t/65162cab3a614c44bfc067d5/1695952043484/OWERSTINN-BF642a5e899dfe4.otf');} @font-face { font-family: 'Gotu Regular'; src:('https://static1.squarespace.com/static/6515e150efa4b86d81f0cd80/t/6518180b23d07e0831cf1f4d/1696077835881/Gotu-Regular.ttf');} h1 {font-family: 'Owerstinn'; text-transform: uppercase;} h2 {font-family: 'Owerstinn'; text-transform: uppercase;} h3 {font-family: 'Gotu Regular'; text-transform: uppercase;} h4 {font-family: 'Gotu Regular';} Thank you!

FYI, I just abandoned this as I could not get it to work. Thanks for all your help, Ziggy.

It is the same. Only the first of the drop down is showing. /*BASIC STYLES FOR ALL LINKS*/ .header-nav-item a::before, .header-menu-nav-item a::before { content: ''; height:35px; width: 35px; background-size: contain !important; background-repeat: no-repeat !important; vertical-align: middle; margin-right: 2px; margin-left: 0px; display: inline-block; } .header-nav-item--active a { background-image: none !important;} // hide titles .header-nav-item a, .header-menu-nav-item a { font-size:0px;} .header-nav-folder-item-content, .header-nav-folder-item .header-nav-folder-item--external {font-size:1rem !important;} // Rearrange navigation .header-display-desktop { align-items: flex-start; } .header-layout-branding-center-nav-center .header-title-nav-wrapper { margin-right: auto; margin-left: 25%; } .header-layout-branding-center-nav-center .header-actions--left { order: 2; } .header-nav-item:nth-child(1) a::before, .header-menu-nav-item:nth-child(1) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3444a0033485e6ad57e/1694954308502/1.png'); height:27px; width: 27px; } .header-nav-item:nth-child(2) a::before, .header-menu-nav-item:nth-child(2) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f356f41ef323763d12c5/1694954326374/2.png'); } .header-nav-item:nth-child(2) a, {color:#E205C1} .header-nav-item:nth-child(3) a::before, .header-menu-nav-item:nth-child(3) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3604a0033485e6adcce/1694954336586/3.png'); height:27px; width: 27px;} .header-nav-item:nth-child(4) a::before, .header-menu-nav-item:nth-child(4) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f36c93d8ad20f6e22974/1694954348335/4.png'); } .header-nav-item:nth-child(5) a::before, .header-menu-nav-item:nth-child(5) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f94fdfdcbc12f579aed0/1694955855403/7.png'); } .header-nav-item:nth-child(6) a::before, .header-menu-nav-item:nth-child(6) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f383b8b21d565fa09cb4/1694954371771/6.png'); height:30px; width: 30px; }

It's still only the top one, as in the last photo, unfortunately. 😞 I have included my code, now. /*BASIC STYLES FOR ALL LINKS*/ .header-nav-item a::before, .header-menu-nav-item a::before { content: ''; height:35px; width: 35px; background-size: contain !important; background-repeat: no-repeat !important; vertical-align: middle; margin-right: 2px; margin-left: 0px; display: inline-block; } .header-nav-item--active a { background-image: none !important;} // hide titles .header-nav-item a, .header-menu-nav-item a { font-size:0px;} .header-nav-folder-item-content, .header-nav-folder-item .header-nav-folder-item--external {font-size:1rem; } // Rearrange navigation .header-display-desktop { align-items: flex-start; } .header-layout-branding-center-nav-center .header-title-nav-wrapper { margin-right: auto; margin-left: 25%; } .header-layout-branding-center-nav-center .header-actions--left { order: 2; } .header-nav-item:nth-child(1) a::before, .header-menu-nav-item:nth-child(1) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3444a0033485e6ad57e/1694954308502/1.png'); height:27px; width: 27px; } .header-nav-item:nth-child(2) a::before, .header-menu-nav-item:nth-child(2) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f356f41ef323763d12c5/1694954326374/2.png'); } .header-nav-item:nth-child(2) a, {color:#E205C1} .header-nav-item:nth-child(3) a::before, .header-menu-nav-item:nth-child(3) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3604a0033485e6adcce/1694954336586/3.png'); height:27px; width: 27px;} .header-nav-item:nth-child(4) a::before, .header-menu-nav-item:nth-child(4) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f36c93d8ad20f6e22974/1694954348335/4.png'); } .header-nav-item:nth-child(5) a::before, .header-menu-nav-item:nth-child(5) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f94fdfdcbc12f579aed0/1694955855403/7.png'); } .header-nav-item:nth-child(6) a::before, .header-menu-nav-item:nth-child(6) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f383b8b21d565fa09cb4/1694954371771/6.png'); height:30px; width: 30px; }

It worked but only for the top page in the folder.

Ziggy, thanks so much. That worked wonders on the top navigation, but one of my items is a folder and has subnavigation. I do want the sub-navigation titles visible. Any idea how to make that happen?

Hi, everyone. I want to hide the text in my navigation, but I don't want to hide the backgrounds I've managed to put for each navigation link. The workaround I've found is deleting the navigation name in the navigation organization tree, which makes it difficult to stay organized. I would like to know if there is a proper way to do Additionally, I despise the default location of the social media links in this header format. Is there a way to position them in the very top right corner? Current Layout Thank you in advance! Current code (I haven't even begun on the social links!): /*BASIC STYLES FOR ALL LINKS*/ .header-nav-item a::before, .header-menu-nav-item a::before { content: ''; height:35px; width: 35px; background-size: contain !important; background-repeat: no-repeat !important; vertical-align: middle; margin-right: 2px; margin-left: 0px; display: inline-block; } .header-nav-item--active a { background-image: none !important; } .header-nav-item:nth-child(1) a::before, .header-menu-nav-item:nth-child(1) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3444a0033485e6ad57e/1694954308502/1.png'); height:27px; width: 27px; } .header-nav-item:nth-child(2) a::before, .header-menu-nav-item:nth-child(2) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f356f41ef323763d12c5/1694954326374/2.png'); } .header-nav-item:nth-child(2) a, {color:#E205C1} .header-nav-item:nth-child(3) a::before, .header-menu-nav-item:nth-child(3) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3604a0033485e6adcce/1694954336586/3.png'); height:27px; width: 27px;} .header-nav-item:nth-child(4) a::before, .header-menu-nav-item:nth-child(4) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f36c93d8ad20f6e22974/1694954348335/4.png'); } .header-nav-item:nth-child(5) a::before, .header-menu-nav-item:nth-child(5) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f94fdfdcbc12f579aed0/1694955855403/7.png'); } .header-nav-item:nth-child(6) a::before, .header-menu-nav-item:nth-child(6) a::before { background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f383b8b21d565fa09cb4/1694954371771/6.png'); height:30px; width: 30px; }