Secondary text style

[confidero]

Hey Themeco-Team,

i have made a inline header navigation and would like to have a secondary text style for top links.

Option 1:
Make the text bold (hover effect)

Option 2:
Use a different font (hover effect)

Is that possible?

Best regards

Patrick

[christian]

Hey @ammes90,

The builder does not have those options. I’m not exactly sure of the reason why but personally, I would not recommend those because both of them requires loading extra font sets and that reduces your page load speed. This would also require that you use custom CSS.

I’d recommend that you use the Particle of the Navigation Inline element instead. Please see our Particle Partial tutorial for more details.

Thanks.

[confidero]

Hey,

thank you for your answer. Unfortunately my customer wants bold text as hover effect.

I already entered this code:

a:hover {
font-weight: bold !important;
}

to make the links bold - works fine on the website but NOT at the header. Any Idea?

Best regards

Patrick

[christian]

Hey Patrick,

In that case, please add this code to the Navigation Inline > Element CSS.

$el a:hover .x-anchor-text-primary {
  font-weight:bold !important;
}

For global implementation, you can also try updating your previous code to this:

a:hover .x-anchor-text-primary {
  font-weight:bold !important;
}

Just note that I was able to provide a custom code because this only requires a few lines of code or is simple. We could not always do this moreover that this is outside the scope of our support. This only serves as a guide.

Hope that helps.