designbyjrs Posted April 7, 2023 Share Posted April 7, 2023 (edited) Hi all! Is there any way to target specific links in the main menu using CSS? For example, I'm looking to make each link in my main menu a different color. https://garlic-orb-gdec.squarespace.com/ PW to site is pleasehelp. 🙂 Julia Edited April 10, 2023 by designbyjrs Link to comment
Solution tuanphan Posted April 12, 2023 Solution Share Posted April 12, 2023 Add to Design > CUstom CSS nav.header-nav-list>div:nth-child(1) a, .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(1) a { color: #f1f !important; } nav.header-nav-list>div:nth-child(2) a .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a { color: red !important; } nav.header-nav-list>div:nth-child(3) a, .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(3) a { color: green !important; } nav.header-nav-list>div:nth-child(4) a, .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(4) a { color: brown !important; }  Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
designbyjrs Posted April 12, 2023 Author Share Posted April 12, 2023 It worked!! Thank you Tuanphan, you coding legend. emalu 1 Link to comment
giorgiasage Posted August 14, 2023 Share Posted August 14, 2023 hi @tuanphan, this solution worked great for creating faux-button styles for some of my links. However, I want to target their outer container to use a flex-grow property to force a line break in the nav link flexbox. Is there a way to modify this code to do so? Link to comment
tuanphan Posted August 16, 2023 Share Posted August 16, 2023 On 8/15/2023 at 3:10 AM, giorgiasage said: hi @tuanphan, this solution worked great for creating faux-button styles for some of my links. However, I want to target their outer container to use a flex-grow property to force a line break in the nav link flexbox. Is there a way to modify this code to do so? Which position you want to add line break? after Apply item or? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hey_sp Posted March 4 Share Posted March 4 Hi @tuanphan I think this is a similar issue. I have two buttons in my main nav and I want to just target one of them. Is there a way for me to change the background colour of just the "Match with a Therapist" button in my header nav? https://goldfish-wrasse-48kn.squarespace.com/ password: igc Link to comment
tuanphan Posted March 7 Share Posted March 7 On 3/5/2024 at 3:12 AM, hey_sp said: Hi @tuanphan I think this is a similar issue. I have two buttons in my main nav and I want to just target one of them. Is there a way for me to change the background colour of just the "Match with a Therapist" button in my header nav? https://goldfish-wrasse-48kn.squarespace.com/ password: igc You can use this CSS code #siteWrapper header#header a.btn:nth-child(2) { background-color: #f1f !important; } Note: this code will target both Button Header in Desktop + Mobile Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
rfung Posted June 24 Share Posted June 24 Hi Everyone, Is there a way to use the same type of child logic to to apply the below code the each individual folder nav title? I want each section to have a different coloured underline on active (folder title only not content), If I was able to achieve it on hover as well then even better... Currently I have this which does it on all folder titles: .header-nav-item--active a { Â background-image: none !important; Â border-bottom: 5px solid #20AECF; Â } .header-nav-folder-content a{ Â border-bottom: none; } Link to comment
tuanphan Posted June 25 Share Posted June 25 On 6/24/2024 at 3:51 PM, rfung said: Hi Everyone, Is there a way to use the same type of child logic to to apply the below code the each individual folder nav title? I want each section to have a different coloured underline on active (folder title only not content), If I was able to achieve it on hover as well then even better... Currently I have this which does it on all folder titles: .header-nav-item--active a {  background-image: none !important;  border-bottom: 5px solid #20AECF;  } .header-nav-folder-content a{  border-bottom: none; } Use something like this div.header-nav-item:nth-child(3)>a { background-image: none !important; border-bottom: 5px solid #20AECF !important; } rfung 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
rfung Posted June 26 Share Posted June 26 Brilliant, this works to have them with an underline permanently. Is there a way to make it only happen on hover and when 'active'? Â div.header-nav-item:nth-child(1)>a { Â Â Â background-image: none !important; Â border-bottom: 5px solid #e94562 !important; } div.header-nav-item:nth-child(2)>a { Â Â Â background-image: none !important; Â border-bottom: 5px solid #20aecf !important; } div.header-nav-item:nth-child(3)>a { Â Â Â background-image: none !important; Â border-bottom: 5px solid #fab92c !important; } div.header-nav-item:nth-child(4)>a { Â Â Â background-image: none !important; Â border-bottom: 5px solid #c9d53c !important; } Link to comment
rfung Posted June 27 Share Posted June 27 Ah I've got it: div.header-nav-item:nth-child(1)>a:hover {    background-image: none !important;  border-bottom: 5px solid #e94562 !important; } Thank for all your help 🙂  Link to comment
rfung Posted June 27 Share Posted June 27 @tuanphan Sorry, I have changed how I'm achieving the line as it was moving the nav up and down before. Instead I have worked out how to grab and tweak SS standard active underline and tweak it. However I can't work out how to apply child logic to nav links 1 - 4 now, as the code setup is different... any ideas? The below shows how I am currently applying one colour to folder titles both in hover and active state. I would like to change the " background-image: linear-gradient(#e94562, #e94562);"Â for the 4 nav titles: Â //GRAB SS active underline: body:not(.header--menu-open) .header-nav-item--active>a { Â Â background-image: linear-gradient(#e94562, #e94562); Â Â background-repeat: repeat-x; Â Â background-size: 1px 3px; Â Â background-position: 0 100%; Â Â background-position: 0 calc(100% - 0.1em); } //Apply SS underline style on hover: body:not(.header--menu-open) .header-nav-item>a:hover { Â Â background-image: linear-gradient(#e94562, #e94562); Â Â background-repeat: repeat-x; Â Â background-size: 1px 3px; Â Â background-position: 0 100%; Â Â background-position: 0 calc(100% - 0.1em); } Â Any ideas? Â Link to comment
rfung Posted June 27 Share Posted June 27 Ah this seems to have solved it: //hover div.header-nav-item:hover:nth-child(1)>a { Â Â Â background-image: linear-gradient(#e94562, #e94562); Â Â background-repeat: repeat-x; Â Â background-size: 1px 3px; Â Â background-position: 0 100%; Â Â background-position: 0 calc(100% - 0.1em); } //active div.header-nav-item--active:nth-child(1)>a { Â Â Â background-image: linear-gradient(#e94562, #e94562); Â Â background-repeat: repeat-x; Â Â background-size: 1px 3px; Â Â background-position: 0 100%; Â Â background-position: 0 calc(100% - 0.1em); } 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