Jump to content

Underline Active Navigation and On Hover

Recommended Posts

Hello,

I'm trying to have the text transform to underline in the main navigation (at the top), as well as on hover. Working in Pacific. The text color changes on hover and active currently, but would like to underline as well. Tried to work with the .active-link command, but didn't get far.

my site: s2corporation.squarespace.com

Any help on this would be awesome!

Link to comment
  • Replies 4
  • Views 12.8k
  • Created
  • Last Reply

Go to your site menu and click on Settings, then click on Advanced, then Code Injection. In the Header section, enter the following, then click Save. Adding the code here, rather than on the page settings, will ensure the CSS is applied site-wide:


<style>
#header a:active{
 text-decoration: underline !important;
}

#header a:hover{
 text-decoration: underline !important;
}

div.folder.active{
 text-decoration: underline !important;
}

</style>

This will take care of underlining the active folder, and will also underline subnav items as you hover over them. Is this what you needed?

Link to comment

Awesome. That did the trick almost perfect. The folder and hover code works great (I styled the folder one with a color: red; function), but the active link code isn't working for me. Any ideas? Thanks!!

Link to comment

I may have had the underline code disabled momentarily while I was working on some css. Tried that code, and still no go. It's weird that it's just the active link that doesn't show up underlined.Thanks for all the help though!

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.