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:
The active / hover effect underlines are different. (One came with template and one is my custom CSS, I prefer my customization).
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 */
}
sorca_marian reacted to a post in a topic:
Trying to customize states of links in header
