Add Social Networks icons in top menu

Hi @gironasecreta,

The theme’s Social Links Menu displays in the footer by default, however, you could add some custom CSS to also add social icons to the Primary Menu.

The first step is for you to navigate to Appearance > Menus and add custom links to your different social profiles to the Primary Menu.

Next, to add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

.primary-menu ul a:before {
	font-family: "Genericons";
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	text-decoration: inherit;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	speak: none;
}

.primary-menu ul a[href*="facebook.com"], .primary-menu ul a[href*="twitter.com], .primary-menu ul a[href*="pinterest.com"], .primary-menu ul a[href*="tumblr.com"], .primary-menu ul a[href*="youtube.com"], .primary-menu ul a[href*="flickr.com"], .primary-menu ul a[href*="vimeo.com"], .primary-menu ul a[href*="instagram.com"], .primary-menu ul a[href*="linkedin.com"], .primary-menu ul a[href*="foursquare.com"], .primary-menu ul a[href*="spotify.com"], .primary-menu ul a[href*="skype"], .primary-menu ul a[href*="wordpress.org"], .primary-menu ul a[href*="wordpress.com"], .primary-menu ul a[href*="mailto"] {
	width: 20px;
	visibility: hidden;
	font-size: 20px;
}

.primary-menu ul a[href*="facebook.com"]:before {
	content: "\f204";
	visibility: visible;
}

.primary-menu ul a[href*="twitter.com"]:before {
	content: "\f202";
	visibility: visible;
}

.primary-menu ul a[href*="pinterest.com"]:before {
	content: "\f209";
	visibility: visible;
}

.primary-menu ul a[href*="tumblr.com"]:before {
	content: "\f214";
	visibility: visible;
}

.primary-menu ul a[href*="youtube.com"]:before {
	content: "\f213";
	visibility: visible;
}

.primary-menu ul a[href*="flickr.com"]:before {
	content: "\f211";
	visibility: visible;
}

.primary-menu ul a[href*="vimeo.com"]:before {
	content: "\f212";
	visibility: visible;
}

.primary-menu ul a[href*="instagram.com"]:before {
	content: "\f215";
	visibility: visible;
}

.primary-menu ul a[href*="linkedin.com"]:before {
	content: "\f207";
	visibility: visible;
}

.primary-menu ul a[href*="foursquare.com"]:before {
	content: "\f226";
	visibility: visible;
}

.primary-menu ul a[href*="spotify.com"]:before {
	content: "\f515";
	visibility: visible;
}

.primary-menu ul a[href*="skype"]:before {
	content: "\f220";
	visibility: visible;
}

.primary-menu ul a[href*="wordpress.org"]:before,
.primary-menu ul a[href*="wordpress.com"]:before {
	content: "\f205";
	visibility: visible;
}

.primary-menu ul a[href*="mailto"]:before {
	content: "\f410";
	visibility: visible;
}

The above will convert the links to your social profiles into icons.

If the above doesn’t work out for you, please share a link to your site and I’ll take another look.

Thanks!