Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
ltcron

Navigation hover in Squarespace 7.1

Question

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!

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 0
/* 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 by tuanphan

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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! 

Share this post


Link to post
  • 0
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 by NoelM
easier to read warning message

Share this post


Link to post
  • 0
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 faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 0
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 faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...