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
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

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

×
×
  • 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.