How can I make hyperlinks appear in blue when the text is bold or part of a heading in Webflow?
- Set the default link color to blue in the Webflow Style panel.
- Manually adjust bolded hyperlinks if they override the blue color.
- Ensure headings don’t override link color by using a custom class or adding CSS in Head Code to force blue links.
By default, bold text and headings may override the hyperlink color in Webflow due to default typography settings. You need to manually adjust the link styling to ensure blue-colored links appear within bold text and headings.
1. Update the Default Link Color
- Go to the Style panel in Webflow Designer.
- Click on any hyperlink to select it.
- Under the Typography section, set the font color to blue.
- This sets the default color for all links.
2. Adjust Link Styling for Bold Text
- Select a bolded hyperlink in the text.
- Check if the Typography color changes when bold is applied.
- If it overrides the blue, manually set the color to blue again.
- Use custom CSS (via custom code) if Webflow overrides the color automatically.
3. Modify Links Inside Headings
Click on any heading (H1, H2, etc.) in the Designer.
Go to the Typography section and ensure the default color isn't overriding links.
If hyperlink color is missing, create a custom class for headings that explicitly sets link color to blue.
Alternatively, use Custom Code: Add this inside Project Settings → Custom Code → Head Code:
```
```
Summary
Make sure the global link color is blue in the Style panel, manually adjust bolded text if needed, and override heading styles using either custom classes or CSS in the Head Code to ensure links retain their color.