nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Hyperlinked words not appearing in black font

AlexisTerriquez

Hello, I am having difficulty getting the circled words to appear in bold and in black font, as they are hyperlinked. Originally I was able to achieve this, and the links worked just fine. However it randomly just started doing this. This issue also appears on all hyperlinked words - again, everything was looking fine in the beginning. Does anyone know how to fix this?

Trouver plus de publications taguées avec

Accepted answers

KlaraSchmitt

It looks like your theme link color is set to white based on your buttons in frame, which we calculate using link color and site background color. It would appear that the site link color may be winning against your inline link color. When you switch to the code view, are your links styled like this:

<li><a href="#" style="color: #000000; font-weight: bold;">Link text</a> goes here</li>

All comments

KlaraSchmitt

AlexisTerriquez

Hello @KlaraSchmitt

Thank you! That worked on my end. By chance, would you also happen to know why the hyperlinked words turn purple after I click on them? Is there a way to fix that so it always stays black?

KlaraSchmitt

Yes. That sounds like the browser default. Okay, so this a two step deal.

1) You need to give your row a unique CSS class. You'll do this by selecting Row > Edit (pencil) and then finding the "Row CSS Class." Type a name in that field (I named my row "green-row" for purposes of this example.)

2) Go back to your text card. Switch into the HTML editor. You can take off the inline styles I gave you earlier as this you won't need them with this snippet. Then at the top of your text card, you'll want to add:

<style>
.green-row a:link {color:#000000; font-weight:bold;}
.green-row a:hover {color:#000000; font-weight:bold;}
.green-row a:visited {color:#000000; font-weight:bold;}
</style>

But replace .green-row with .your-class-name instead.

This will ensure that you have black, bold text for all three link states: link, hover, visited. But if you don't put the class name of the row ahead of those selectors, you're going to get that style for every link you have on your site and that might not benefit you if any of your other rows have dark backgrounds. Generally, we want to avoid really generic selectors for that reason - they are far more likely to have unpredictable reach, so I definitely recommend making sure you have a unique row class around generic selectors to avoid that situation.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.