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

On 10/20/2023 at 3:58 PM, Web_Solutions said:

 

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

Hello! Yes, the password is

limescarf13

I think I may need to upgrade to publish the site. Please let me know if you can't access. I will not take as long to respond this time 🙂

It says: "SITE DELETED This site has been deleted by the owner."

https://aardvark-tangerine-ncep.squarespace.com/

On 10/20/2023 at 3:58 PM, Web_Solutions said:

 

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

Here is the new URL for the site: nonagon-swan-prtl.squarespace.com

apologies!

23 hours ago, sorca_marian said:

It says: "SITE DELETED This site has been deleted by the owner."

 

https://aardvark-tangerine-ncep.squarespace.com/

Sorry about that. The new site is : nonagon-swan-prtl.squarespace.com

Please provide the password to view it

On 1/13/2024 at 5:21 AM, sorca_marian said:

Please provide the password to view it

password is 

limescarf13

I just checked it and it works like you wanted it. Maybe you found a solution

5 hours ago, sorca_marian said:

I just checked it and it works like you wanted it. Maybe you found a solution

Hi Sorca,

Thanks for checking it, but I see the same issue. When I click on a link in the header and it's in active state, when I hover over the active link a second underline appears. See screenshot.

Add the below code in Custom CSS
 

.header-nav-item:hover {
    text-decoration: none;
}

6 hours ago, sorca_marian said:

Add the below code in Custom CSS
 

.header-nav-item:hover {
    text-decoration: none;
}

 

Thank you! That worked, but if you notice in my screenshot, the hover line and the active link line have different spacing beneath the link. Is there a way to make this uniform? (Commissions vs. Classes)

Yes, in addition to the above code, add the below one as well in Custom CSS

.header-nav-item:not(.header-nav-item--active):hover {
    text-decoration : none;
}

.header-nav-item:not(.header-nav-item--active):hover a {
    background-image: linear-gradient(currentColor,currentColor);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
    background-position: 0 calc(100% - 0.1em);
}

Please mark my above post as the solution