mrsmahersbar Posted January 19, 2021 Share Posted January 19, 2021 (edited) I am trying to change the font colour of my site navigation on one page only and haven't had any luck at all with any code suggestions. I am using a Brine template. I've already added a custom logo code to the Advanced section of my portfolio page so I'm wondering if that's what's getting in my way? These are the codes I've tried (using my own collection #): #collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item { color: #9b6b3b; } and nav#mainNavigation * { color: #9b6b3b !important; } If anyone could help, it would be so very appreciated! In case it helps, here is the code that's in there currently for the alternate logo (which is working just fine): <style> .header-title-logo a { content: url("https://static1.squarespace.com/static/5fc6eb4e9ea50d41209e5974/t/6004ba6e12a04d6cc4a550cc/1610922606737/LOGO+OPTION+3-+Lora-+transparent+background-+bronze.png"); } </style> I tried to combine the two codes and it didn't do anything. Thanks so much for your help! Edited January 19, 2021 by mrsmahersbar Beyondspace 1 Link to comment
Beyondspace Posted January 19, 2021 Share Posted January 19, 2021 1 hour ago, mrsmahersbar said: I am trying to change the font colour of my site navigation on one page only and haven't had any luck at all with any code suggestions. I am using a Brine template. I've already added a custom logo code to the Advanced section of my portfolio page so I'm wondering if that's what's getting in my way? These are the codes I've tried (using my own collection #): #collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item { color: #9b6b3b; } and nav#mainNavigation * { color: #9b6b3b !important; } If anyone could help, it would be so very appreciated! In case it helps, here is the code that's in there currently for the alternate logo (which is working just fine): <style> .header-title-logo a { content: url("https://static1.squarespace.com/static/5fc6eb4e9ea50d41209e5974/t/6004ba6e12a04d6cc4a550cc/1610922606737/LOGO+OPTION+3-+Lora-+transparent+background-+bronze.png"); } </style> I tried to combine the two codes and it didn't do anything. Thanks so much for your help! I used the demo template, are you sure the collection id is correct? #collection-56099b55e4b0ec7b8a89d273 .Header-nav-item, #collection-56099b55e4b0ec7b8a89d273 .Mobile-overlay-nav-item { color: #9b6b3b; } Use this extension to get the correct id for your page Chrome Web Store - Extensions (google.com) BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
mrsmahersbar Posted January 19, 2021 Author Share Posted January 19, 2021 (edited) @bangank36 Thanks so much for your quick attempt to help! I am sure, that is the plugin I used after seeing another one of your posts. Whenever I enter it into the Advanced section of the page, the code shows up at the top of the page. Not sure what I'm doing wrong here. Edited January 19, 2021 by mrsmahersbar Link to comment
Beyondspace Posted January 19, 2021 Share Posted January 19, 2021 14 minutes ago, mrsmahersbar said: @bangank36 Thanks so much for your quick attempt to help! I am sure, that is the plugin I used after seeing another one of your posts. Whenever I enter it into the Advanced section of the page, the code shows up at the top of the page. Not sure what I'm doing wrong here. You should paste into Design->Custom CSS instead of code injection BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
mrsmahersbar Posted January 19, 2021 Author Share Posted January 19, 2021 (edited) @bangank36Whenever I do that, nothing happens at all. It's very strange. Is the string of code you're providing the whole string or am I supposed to add something else to it? The colour should be a dark gold-brown but it's staying the same light colour as on my homepage. Thanks again for your help. Edited January 19, 2021 by mrsmahersbar Link to comment
Beyondspace Posted January 19, 2021 Share Posted January 19, 2021 5 hours ago, mrsmahersbar said: @bangank36Whenever I do that, nothing happens at all. It's very strange. Is the string of code you're providing the whole string or am I supposed to add something else to it? The colour should be a dark gold-brown but it's staying the same light colour as on my homepage. Thanks again for your help. #collection-56099b55e4b0ec7b8a89d273 is demo id, you got to replace it with the one on your page BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
mrsmahersbar Posted January 20, 2021 Author Share Posted January 20, 2021 @bangank36I don't know how that happened... it wasn't letting me paste my collection id into the code. I tried again with the below code once I got the clipboard function working again and it's the same issue. Will not change colour. I have no idea why it's being so stubborn! #collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item, #collection-5fc6f37befc65c5b7a35dc2e .Mobile-overlay-nav-item { color: #9b6b3b; } Beyondspace 1 Link to comment
Beyondspace Posted January 20, 2021 Share Posted January 20, 2021 1 hour ago, mrsmahersbar said: @bangank36I don't know how that happened... it wasn't letting me paste my collection id into the code. I tried again with the below code once I got the clipboard function working again and it's the same issue. Will not change colour. I have no idea why it's being so stubborn! #collection-5fc6f37befc65c5b7a35dc2e .Header-nav-item, #collection-5fc6f37befc65c5b7a35dc2e .Mobile-overlay-nav-item { color: #9b6b3b; } Is it the cover page? Custom css not apply on cover page. What is your site url? I can have a look BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 On 1/20/2021 at 7:30 AM, mrsmahersbar said: } Try add this to Cover Page Header <style> .Header-nav-item,.Mobile-overlay-nav-item { color: #9b6b3b; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
SouthernSunEvents Posted October 26, 2021 Share Posted October 26, 2021 On 1/23/2021 at 6:24 AM, tuanphan said: Try add this to Cover Page Header <style> .Header-nav-item,.Mobile-overlay-nav-item { color: #9b6b3b; } </style> @tuanphanAlso trying to change nav text color to black on this page but I'm stuck: www.southernsunevents.com/about-us Link to comment
Beyondspace Posted October 26, 2021 Share Posted October 26, 2021 (edited) 16 minutes ago, SouthernSunEvents said: @tuanphanAlso trying to change nav text color to black on this page but I'm stuck: www.southernsunevents.com/about-us we can have 2 ways: - Add to Home > Design > Custom Css #not-found .Header-nav-inner > a { color:#000 !important; } - Home > Pages > Choose the page you want to apply the nav text color add style to header Page.mp4 Adding to Advanced > PAGE HEADER CODE INJECTION <style> .Header-nav-inner > a { color: #000 !important; } </style> Change the color with one you want to apply Let me know if it works properly on your site Support me by pressing 👍 if this useful for you Edited October 26, 2021 by bangank36 tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tuanphan Posted October 29, 2021 Share Posted October 29, 2021 On 10/27/2021 at 12:06 AM, SouthernSunEvents said: @tuanphanAlso trying to change nav text color to black on this page but I'm stuck: www.southernsunevents.com/about-us You can use above code. Or if you use Personal Plan, you can edit page >> Add a Code Block >> Paste above code. You can do similar for other pages <style> .Header-nav-inner > a { color: #000 !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
maxi Posted November 1, 2021 Share Posted November 1, 2021 i have used this code to change the color for navigation buttons. it worked before but it hasnt past couple of months. im assuming b/c of windows update ? can you let us know how to re-enable the code so it works header.Header [href*="Category=sale"] { color: #FF0000 !important; Link to comment
tuanphan Posted November 4, 2021 Share Posted November 4, 2021 On 11/1/2021 at 9:47 PM, maxi said: i have used this code to change the color for navigation buttons. it worked before but it hasnt past couple of months. im assuming b/c of windows update ? can you let us know how to re-enable the code so it works header.Header [href*="Category=sale"] { color: #FF0000 !important; Can you share link to page where you need to change nav buttons? We can check easier Also, your code missing closing } symbol Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
maxi Posted November 4, 2021 Share Posted November 4, 2021 hello .. i figured it out 🙂 www.maxishop.ca is the website .. Link to comment
tuanphan Posted November 7, 2021 Share Posted November 7, 2021 On 11/4/2021 at 11:24 PM, maxi said: hello .. i figured it out 🙂 www.maxishop.ca is the website .. Did you figure it out or still need help?? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
SouthernSunEvents Posted November 15, 2021 Share Posted November 15, 2021 (edited) On 10/26/2021 at 1:23 PM, bangank36 said: <style> .Header-nav-inner > a { color: #000 !important; } </style> This worked perfect but I forgot I'll also be needing to change the "+" drop down color for mobile and the "MENU" for tablet views. Any ideas? @tuanphan @bangank36 Thanks so much! Edited November 15, 2021 by SouthernSunEvents Link to comment
Bettoriginal Posted November 16, 2021 Share Posted November 16, 2021 /* change header nav active style */ .header-nav-item--active a { background-image: none !important; } /* change header nav active style */ .header-nav-item--active a { color: #000000 !important; background-image: none !important; } Link to comment
Beyondspace Posted November 16, 2021 Share Posted November 16, 2021 23 hours ago, SouthernSunEvents said: This worked perfect but I forgot I'll also be needing to change the "+" drop down color for mobile and the "MENU" for tablet views. Any ideas? @tuanphan @bangank36 Thanks so much! Hi, You can try adding to Home > Design > Custom Css //Change the color of + button @media screen and (min-width: 100px) and (max-width: 766px) { button.Mobile-bar-menu:after{ color: red !important; } } //Change the color of menu button button.Mobile-bar-menu:after{ color: red !important; } Change the color until it meets your desired result Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
SouthernSunEvents Posted November 23, 2021 Share Posted November 23, 2021 On 11/16/2021 at 12:30 PM, bangank36 said: //Change the color of + button @media screen and (min-width: 100px) and (max-width: 766px) { button.Mobile-bar-menu:after{ color: red !important; } } //Change the color of menu button button.Mobile-bar-menu:after{ color: red !important; } Worked great! Thank you so much! Link to comment
maxi Posted January 24, 2022 Share Posted January 24, 2022 We have noted that when we have (1) variant for product ie one size, one colour, one of .. on the front end only the ADD TO CART button shows up. The size and colour drop menus do not show therefore the consumer doesn't know what they are buying .. until they click add to cart .. the size then shows up in the cart ! .. is there a CSS for this glitch ? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment