The default Harmony style sheet [p7HMY-01.css] contains a set of text link styles that are applied automatically. Sometimes these rules can conflict with other elements on your pages, such as menus or widgets, by assigning unwanted borders or an unexpected color. If this is a problem, there are two ways to fix things:
Locate the following rules in your Harmony CSS file:
.p7HMY .hmy-section a {
border-bottom: 1px dotted;
transition: all linear .5s;
color: inherit;
text-decoration: none;
}
.p7HMY .hmy-section a:hover {
border-bottom: 1px solid;
}
Change them to target the p tag:
.p7HMY .hmy-section p a {
border-bottom: 1px dotted;
transition: all linear .5s;
color: inherit;
text-decoration: none;
}
.p7HMY .hmy-section p a:hover {
border-bottom: 1px solid;
}
Change the above rule names to require a class of text-links:
.p7HMY .hmy-section a.text-links {
border-bottom: 1px dotted;
transition: all linear .5s;
color: inherit;
text-decoration: none;
}
.p7HMY .hmy-section p a.text-links:hover {
border-bottom: 1px solid;
}
<a href="index.htm" class="text-links">My link</a>
That's it!