Jump to content

Remove line from Site Navigation and add hover color

Recommended Posts

Site URL: http://www.tillynelson.com

I wanted to remove the line on my navigation menu and add a custom hover color. Managed to work it out so here is the code you'll need;
Home > Design > Custom CSS > copy the below in;
/* Nav item color */ black
.header-nav-item a {
    color: #ff0000 !important;
/* Nav item hover color */
.header-nav-item a:hover {
    color:  #709DD1!important;
/* Nav item active color */
.header-nav-item--active a {
  color: #709DD1!important;
/* remove underline on nav */
.header-nav-item--active a {
  background-image: none !important;
Extra notes:
1. #709DD1 = the HTML color code. Could replace with the words like red or blue if a standard colour. https://html-color-codes.info/colors-from-image/ - to find your html color code.
2. /* remove underline on nav */
.header-nav-item--active a {
  background-image: none !important; = just the part about the underline if you don't want to change colors.
3. Don't forget the } at the end.
Link to comment
  • Replies 0
  • Views 1.1k
  • Created
  • Last Reply


This topic is now archived and is 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.