Hey @brentoshiro, the properties will vary depending on what you need styled, but the way you would select the links would be like so:
To style all header links:
.custom-header-links .headerLink a {
font-size: 1rem; // replace with your font size of choice
color: #96b67b; // can also use variables such as var(--tertiary);
font-style: italic; // options: normal, italic, oblique
}
To style a specific link
You can access the link either using the link title (separated by dashes and lower case) like so for “Privacy”:
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: red;
}
or by using the title attribute and entering the link title:
.custom-header-links .headerLink a[title='Our Privacy Policy'] {
color: purple;
}
To add styles on hover, you simple add :hover
after the a
tag:
.custom-header-links .headerLink a:hover {
color: var(--primary-low);
}