How do you change the social icons color in the navigation on a different page? Thank you for this! You are the only video that LITERALLY posted this problem!
Hi , Thank you for your lesson, i'm interested if there is possible to change menu items color each only one page, when i try to change color some of page, whole menu changet it
sorry for my late reply as i've been on vacation! not sure if i'm understanding your question - are you wanting to change the color of one navigation link on only one page?
absolutely, great idea! you'd just need to target specific pages in the CSS using the collection ID. here's our post on how to do that: www.ajmexperience.com/learn-posts/apply-css if you're not sure how to find those ID's, here's how: www.ajmexperience.com/learn-posts/find-block-id-squarespace so it'd look something like this: #COLLECTION-ID .header-nav-item:nth-child(2) a { color: #7cccbd !important; } i recorded a quick loom video to show you :) www.loom.com/share/99051f8ab8ba403480e5fcdbe1186477?sid=ba1a0546-2ed2-4811-891d-4bfe4525ba38
sure! here's how to make a specific nav link bold and change the color: .header-nav-item:nth-child(2) a { color: #7cccbd !important; font-weight: bold !important; } please note the bold will only work with certain fonts. i tried this while using a more obscure font for my navigation and it didn't work, but it works great with more common fonts (try the ones toward the top of the font list in Squarespace)
great question! use this and adjust the first number for which dropdown you want to target, then the second number for which link within that dropdown you want to target. .header-nav-item:nth-child(2) .header-nav-folder-item:nth-child(2) a { color: #7cccbd !important; }
oh yes! realizing this piece isn't in the description / original post, but adding it now. here it is: @media only screen and (max-width: 767px) { .header-menu-nav-item:nth-child(2) a { color: #7cccbd !important; }}
How do you change the social icons color in the navigation on a different page? Thank you for this! You are the only video that LITERALLY posted this problem!
So glad I could help! I have a post + video on changing the color of nav social icons here: www.ajmexperience.com/learn-posts/change-social-icon-color
Hi , Thank you for your lesson, i'm interested if there is possible to change menu items color each only one page, when i try to change color some of page, whole menu changet it
sorry for my late reply as i've been on vacation! not sure if i'm understanding your question - are you wanting to change the color of one navigation link on only one page?
Incredibly helpful. Thank you so much!
so happy to help!
Nice Tutorial! Is there a way to change the color, depending on what site the user is on? Different colors on the Homepage and the About Me e.g.
absolutely, great idea! you'd just need to target specific pages in the CSS using the collection ID.
here's our post on how to do that: www.ajmexperience.com/learn-posts/apply-css
if you're not sure how to find those ID's, here's how: www.ajmexperience.com/learn-posts/find-block-id-squarespace
so it'd look something like this:
#COLLECTION-ID .header-nav-item:nth-child(2) a {
color: #7cccbd !important; }
i recorded a quick loom video to show you :)
www.loom.com/share/99051f8ab8ba403480e5fcdbe1186477?sid=ba1a0546-2ed2-4811-891d-4bfe4525ba38
Wow, thats awesome!! Thank you so much for the help and the video :D@@ajmexperience
yayyy, so happy to help! @@kenan-nynor
Is it possible to make the heading bold as well? Thanks for this!
sure! here's how to make a specific nav link bold and change the color:
.header-nav-item:nth-child(2) a {
color: #7cccbd !important;
font-weight: bold !important; }
please note the bold will only work with certain fonts. i tried this while using a more obscure font for my navigation and it didn't work, but it works great with more common fonts (try the ones toward the top of the font list in Squarespace)
Thank you!! Is it possible to do it for a dropdown link, I have Language as a dropdown and would love to stand that out, is it possible?
great question! use this and adjust the first number for which dropdown you want to target, then the second number for which link within that dropdown you want to target.
.header-nav-item:nth-child(2)
.header-nav-folder-item:nth-child(2)
a {
color: #7cccbd !important;
}
@@ajmexperience so helpful thank you! How do I apply this to my mobile dropdown links also?
@@LARAFILMS26 that is still stumping me 😭 i'm working on it and will update you as soon as i figure it out!
hello, me again :)
I got a question:
Is this also possible for mobile view?
Thanks in advance ^^
oh yes! realizing this piece isn't in the description / original post, but adding it now. here it is:
@media only screen and (max-width: 767px) {
.header-menu-nav-item:nth-child(2) a {
color: #7cccbd !important; }}
These features make my site so much better, thank you so much!! ^^
that's so great to hear! :) @@kenan-nynor
THANKS FOR THIS! Is there a way to apply it to mobile as well?
so happy to help! the code for the mobile menu is slightly different. here ya go:
.header-menu-nav-item:nth-child(2) a {
color: #7cccbd !important;
}
THANK YOU!! @@ajmexperience
Thank you!
glad it was helpful!