ltcron 0 Share Posted November 7, 2019 Hello! I'm looking to change the color of navigation links when I hover over them in Squarespace 7.1. There doesn't seem to be an option to do that yet. Does anyone know the CSS for this? Thanks! Link to post
0 tuanphan 8,964 Share Posted November 8, 2019 (edited) /* Nav item hover color - underline */ .header-nav-item a:hover { color: violet; } Reference (nav hover color code for all templates 7.0 & 7.1): https://beaverhero.com/squarespace-navigation-links/ Edited November 8, 2019 by tuanphan You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 Fishlette 9 Share Posted November 25, 2019 Hmm...having the same issue and the code still isn't doing the hover :/ Is there something else to try? Thanks so much! Link to post
0 tuanphan 8,964 Share Posted November 25, 2019 7 minutes ago, Fishlette said: Hmm...having the same issue and the code still isn't doing the hover :/ Is there something else to try? Thanks so much! Can you share link to your site? You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 Fishlette 9 Share Posted December 18, 2019 Yes! Please see link below: https://www.embodypoledance.com/ Link to post
0 tuanphan 8,964 Share Posted December 19, 2019 On 12/18/2019 at 9:58 PM, Fishlette said: Yes! Please see link below: https://www.embodypoledance.com/ Add to Home > Design > Custom CSS .header-nav-item a:hover { color: red !important; } codydennison, snorkelcookislands and jaisequoia 2 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 snorkelcookislands 1 Share Posted June 16, 2020 Code totally works for me! On 12/19/2019 at 5:07 AM, tuanphan said: Add to Home > Design > Custom CSS .header-nav-item a:hover { color: red !important; } Is there a way to create a hover underline effect for navigation links in the header menu? Link to post
0 Kate 42 Share Posted June 17, 2020 We have a fun free one you can download here (see it in use in navigation on our site) it is a highlighter effect instead of just an underline. www.squreaddons.com If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! Link to post
0 NoelM 0 Share Posted August 8, 2020 (edited) On 12/19/2019 at 10:07 AM, tuanphan said: Add to Home > Design > Custom CSS .header-nav-item a:hover { color: red !important; } I have created a site in Squarespace -http://www.noelwork.org/ but consider myself an intermediate user, in that I've only used the templates so far - haven't tried to inject any Custom CSS. But I want to make my navigation have some effects, like the one referenced above. I was going to enter it on my site, but see the warning: Warning: Adding custom CSS to your site can break your design. Please use caution when using this feature. Our support team will be limited in their ability to help you with design related issues if you have custom CSS. So I'm nervous - is there a way to enter CSS like above and preview/try it? Can I back up my whole site first, in case it breaks it? Open to any advice. Want to do more cool stuff, but don't want to ruin it in advance of a job I'm applying for Monday. Thanks so much in advance! Edited August 9, 2020 by NoelM easier to read warning message Link to post
0 tuanphan 8,964 Share Posted August 9, 2020 16 hours ago, NoelM said: I have created a site in Squarespace -http://www.noelwork.org/ but consider myself an intermediate user, in that I've only used the templates so far - haven't tried to inject any Custom CSS. But I want to make my navigation have some effects, like the one referenced above. I was going to enter it on my site, but see the warning: Warning: Adding custom CSS to your site can break your design. Please use caution when using this feature. Our support team will be limited in their ability to help you with design related issues if you have custom CSS. So I'm nervous - is there a way to enter CSS like above and preview/try it? Can I back up my whole site first, in case it breaks it? Open to any advice. Want to do more cool stuff, but don't want to ruin it in advance of a job I'm applying for Monday. Thanks so much in advance! If CSS break your site, just remove it ;) You can also duplicate your site & test code on the duplicated site. https://support.squarespace.com/hc/en-us/articles/206543627-Duplicating-pages-and-content You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 NoelM 0 Share Posted August 10, 2020 14 hours ago, tuanphan said: If CSS break your site, just remove it 😉 You can also duplicate your site & test code on the duplicated site. https://support.squarespace.com/hc/en-us/articles/206543627-Duplicating-pages-and-content Thanks so much for the tip on how to duplicate my site so I can try ideas out before going live! Much appreciated!!! Link to post
0 NoelM 0 Share Posted August 11, 2020 Good morning! I duplicated my site, and then tried out the code mentioned above: .header-nav-item a:hover { color: red !important; } However, doing that did break three of my pages. Unfortunately, I tried it on both the main site, and also on the duplicated version of the site. Please help! I just want to undo it now, and delete that code. Here is my site: http://www.noelwork.org/ And here are the three pages it broke - that is, the pages come up, but none of the content: http://www.noelwork.org/visualizing-ideas http://www.noelwork.org/reaching-audiences http://www.noelwork.org/winning-opportunities Link to post
0 tuanphan 8,964 Share Posted August 11, 2020 40 minutes ago, NoelM said: Good morning! I duplicated my site, and then tried out the code mentioned above: .header-nav-item a:hover { color: red !important; } However, doing that did break three of my pages. Unfortunately, I tried it on both the main site, and also on the duplicated version of the site. Please help! I just want to undo it now, and delete that code. Here is my site: http://www.noelwork.org/ And here are the three pages it broke - that is, the pages come up, but none of the content: http://www.noelwork.org/visualizing-ideas http://www.noelwork.org/reaching-audiences http://www.noelwork.org/winning-opportunities Add to Page Settings > Advanced > Header <style> .sqs-slice a:hover { border-bottom: 1px solid; } </style> You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 NoelM 0 Share Posted August 11, 2020 Thank you, but I don't see a "Header" category to click - only these categories (see screen cap below): Link to post
0 tuanphan 8,964 Share Posted August 11, 2020 Hover page on Navigation (or Not linked) > Click Gear icon > Page Settings > Advanced > Header NOT Home > Settings > Advanced > Code Injection You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 NoelM 0 Share Posted August 11, 2020 Thank you - I entered that code as you instructed on this page: http://www.noelwork.org/visualizing-ideas But the page has the same problem - none of the content is showing. Link to post
0 tuanphan 8,964 Share Posted August 17, 2020 On 8/11/2020 at 10:41 PM, NoelM said: Thank you - I entered that code as you instructed on this page: http://www.noelwork.org/visualizing-ideas But the page has the same problem - none of the content is showing. Fine here. Did you solve? You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
0 RAD_Design 0 Share Posted August 24, 2020 Hi @tuanphan; wondering if you can help with a slightly similar issue... I'm trying to style my nav menu on a site, by adding a colour to the page last visited. I've managed to do it with code that is working fine on desktop, but mobile just won't work. https://www.360sp.com.au/home1 Code I've used is: .header-nav-item--active a { color: #69BD45 !important; background-image: none !important; } .Mobile-overlay-nav-item:last-child{ color: #69BD45 !important; } Any help would be hugely appreciated! Thanks! Link to post
0 HannahZoe 0 Share Posted yesterday at 12:12 AM On 12/19/2019 at 7:07 AM, tuanphan said: Add to Home > Design > Custom CSS .header-nav-item a:hover { color: red !important; } @tuanphan I am trying to update my site to have icons showing which disappear and become the regular nav text (icon disappears) on hover. Any thoughts???? zetadesignstudio.com pw: brineintopedro Link to post
Question
ltcron 0
Hello! I'm looking to change the color of navigation links when I hover over them in Squarespace 7.1. There doesn't seem to be an option to do that yet. Does anyone know the CSS for this? Thanks!
Link to post
Top Posters For This Question
7
5
2
1
Popular Days
Aug 11
5
Nov 25
2
Dec 19
1
Aug 10
1
Top Posters For This Question
tuanphan 7 posts
NoelM 5 posts
Fishlette 2 posts
ltcron 1 post
Popular Days
Aug 11 2020
5 posts
Nov 25 2019
2 posts
Dec 19 2019
1 post
Aug 10 2020
1 post
Popular Posts
tuanphan
Add to Home > Design > Custom CSS .header-nav-item a:hover { color: red !important; }
Posted Images
18 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment