Trying to customize states of links in header

 Hey there! 

New to Squarespace and CSS. Here's my site: https://aardvark-tangerine-ncep.squarespace.com/config/

I want to customize my header links states to be...

• Inactive: nothing
• Hover: underline (or bottom border)
• Active: underline (or bottom border)

Running into 2 problems:

1. The active / hover effect underlines are different. (One came with template and one is my custom CSS, I prefer my customization).
2. When a link is active AND I hover, it has 2 underline decorations. Only want to show one (active)

Can someone help me out 😄  Thanks in advance! Screenshot attached. CSS snippet below.

/* Apply "DM Sans" to paragraphs and headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}
/* Apply the custom font style to all Paragraph 1 blocks */
p {
    font-family: 'Mulish', sans-serif; /* Apply your desired font */
    /* Additional styling, such as font size, color, etc. */
}

/* Apply a hover effect to the button with the class "your-button-class" */
.your-button-class:hover {
    background-color: #ff6600; /* Change this to your desired hover background color */
    /* Additional styling, such as color, border, etc. */
}

/* Apply a custom font style to the header navigation links */
.header-nav-item {
    font-family:'DM Sans', sans-serif;
  font-weight: 500; 
    /* Additional styling, such as font size, color, etc. */
}
/* Apply an underline effect to the header navigation items on hover */
.header-nav-item:hover {
    text-decoration: underline; /* Add an underline on hover */
}
/* Apply an underline effect to inactive header navigation items on hover */
.header-nav-item:not(.header-nav-item--active):hover {
    text-decoration: underline; /* Add an underline on hover */
}

56 minutes ago, ashleyev said:

 Hey there! 

New to Squarespace and CSS. Here's my site: https://aardvark-tangerine-ncep.squarespace.com/config/

I want to customize my header links states to be...

• Inactive: nothing
• Hover: underline (or bottom border)
• Active: underline (or bottom border)

Running into 2 problems:

1. The active / hover effect underlines are different. (One came with template and one is my custom CSS, I prefer my customization).
2. When a link is active AND I hover, it has 2 underline decorations. Only want to show one (active)

Can someone help me out 😄  Thanks in advance! Screenshot attached. CSS snippet below.

/* Apply "DM Sans" to paragraphs and headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}
/* Apply the custom font style to all Paragraph 1 blocks */
p {
    font-family: 'Mulish', sans-serif; /* Apply your desired font */
    /* Additional styling, such as font size, color, etc. */
}

/* Apply a hover effect to the button with the class "your-button-class" */
.your-button-class:hover {
    background-color: #ff6600; /* Change this to your desired hover background color */
    /* Additional styling, such as color, border, etc. */
}

/* Apply a custom font style to the header navigation links */
.header-nav-item {
    font-family:'DM Sans', sans-serif;
  font-weight: 500; 
    /* Additional styling, such as font size, color, etc. */
}
/* Apply an underline effect to the header navigation items on hover */
.header-nav-item:hover {
    text-decoration: underline; /* Add an underline on hover */
}
/* Apply an underline effect to inactive header navigation items on hover */
.header-nav-item:not(.header-nav-item--active):hover {
    text-decoration: underline; /* Add an underline on hover */
}

 

 

Your website is private now. Can you set a password for your site and share it?

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords?platform=v6&websiteId=63f08707a1ab1979c11e7d14#toc-set-a-site-wide-password