Custom Header Links

Theme component
,
145

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);
}
2 Likes