How to Show Custom Text Labels Instead of Social Icons in the Navigation Menu

When you add a YouTube or other social media link to your Hestia navigation menu, the theme automatically replaces the text label with a branded icon. This guide explains why that happens and shows you how to display your own custom text label instead.

Why Do Social Links Show Icons Instead of Text?

Hestia includes built-in CSS rules that detect social media URLs in your navigation menu and automatically swap the link text for a recognizable branded icon. This happens through a CSS ::before pseudo-element that inserts the icon based on the link's href attribute.

For example, if you add a menu item pointing to https://www.youtube.com/yourchannel and label it "Watch Us on YouTube", the theme CSS will replace that text with a YouTube icon — regardless of the label you set in the menu editor.

This behavior applies to several well-known social domains, including youtube.com, x.com, facebook.com, and others.

📝 Note: This article covers social icons that appear in the main navigation menu. If you want to manage the social icons in the top bar area, see How to Configure the Top Bar in Hestia.

Fix: Add a CSS Override

You can override the theme's icon behavior by adding a small CSS snippet through the WordPress Customizer. No plugin or code file editing is required.

1. Log in to your WordPress dashboard.
2. Go to Appearance > Customize.
3. Click Additional CSS in the Customizer panel.
4. Paste the following CSS into the text area:

#main-navigation a[href*="youtube.com"]::before {
  content: none !important;
  font-size: 0 !important;
}
#main-navigation a[href*="youtube.com"] {
  font-size: inherit !important;
}

5. Click Publish to save your changes.

Your navigation menu items linking to YouTube will now display the text label you set in Appearance > Menus instead of the YouTube icon.

💡 Tip: You can preview the changes live in the Customizer before publishing — look at the menu area in the preview panel on the right side of the screen to confirm the text label is showing correctly.

Testing Your Changes

After publishing, verify that the fix is working as expected:

1. Visit your site's front end in a browser.
2. Check that the navigation menu item now shows your custom text label instead of the YouTube icon.

If you still see the icon, your browser may be displaying a cached version of the stylesheet.

3. Open the page in a private or incognito window (press Ctrl+Shift+N on Windows/Linux or Cmd+Shift+N on Mac in most browsers).
4. Confirm the text label appears correctly in the incognito window.

💡 Tip: Testing in an incognito window bypasses your browser's cache and is the quickest way to confirm that a CSS change has taken effect.

Adapting the Fix for Other Social Networks

The same approach works for any social domain that Hestia converts to an icon. Replace youtube.com in the CSS selector with the domain of the social network you want to fix.

Examples for other common social networks:

/* X (formerly Twitter) */
#main-navigation a[href*="x.com"]::before {
  content: none !important;
  font-size: 0 !important;
}
#main-navigation a[href*="x.com"] {
  font-size: inherit !important;
}

/* Facebook */
#main-navigation a[href*="facebook.com"]::before {
  content: none !important;
  font-size: 0 !important;
}
#main-navigation a[href*="facebook.com"] {
  font-size: inherit !important;
}

You can include multiple overrides in the Additional CSS panel at the same time — simply paste each block one after the other.

📝 Note: The [href*="domain.com"] part of the selector matches any link whose URL contains that domain. This means it will apply to all navigation menu items pointing to that social network, not just a single link.