Social media icons in the header?

How can we add social media icons to the header nav bar? I would like to have them on the right side of the main navigation at the top of my sticky header bar.

Thanks in advance!

Hello there,

Try to use the Menu Icons plugin. To remove the social menu label, apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css:

.menu-item  i._mi + span{
    display: none;
}

To enlarge the icon size, apply the following CSS code:

.menu-item  i._mi{
    font-size: 30px;
}

Regards,
Kharis

Thank you for this. Installed it however this can only be shown instead of the primary navigation menu. So it’s a choice between having a navigation menu (HOME, ABOUT ETC) or having social media icons.

How can I have both a nav menu and social media icons in the header of Sydney Pro?

Thank you!

Hello there,

> How can I have both a nav menu and social media icons in the header of Sydney Pro?

It isn’t an easy task to achieve as the menu location is only one; it isn’t supported by the theme’s code at the moment. As it against our support policy, we only can recommend you to hire a freelancer to assist you.

Thank you for your understanding.

Regards,
Kharis

For now am finding my way around it by adding it in to the main navigation, adding hidden menu items to add space and adjusting the padding.

Recommend this is an addition to your themes as social media in top menus is a very common requirement these days.

Thanks for the code up top.

Hi Kharis

Could you tell me if it is now possible to add social media icons to the nav menu? I’m a beginner with Wordpress, so the simplest way possible would be much appreciated!

Thank you!

Hello there,

Please follow my reply above for the answer to your question. Other user found it worked. https://wordpress.org/support/topic/adding-social-icons-to-the-top-menu-top-bar/#post-8423384.

Feel free to write if extra question comes up.

Regards,
Kharis