Header links and social icons

[Jeroen van Aerle]

Hey Bill,

I have two questions:

– In my header menu I use normal links to recreate a one page website. Now I can’t seem to change the color of the links (text and hoover).

and second:

– Is there a way to change the color of the social icons supplied within the theme or replace them?

Thanx!

Jeroen

[Jeroen van Aerle]

Made a typo in the site URL. It’s: http://www.teamtrapped.com

Jeroen

[Bill Robbins]

Good Morning Jeroen,

Great question about the menu. It looks like the hover/current menu item color is set to be black. Since it’s a one page site, that will make all the links black against the black header since all the links are technically for the current page as far as WordPress is concerned.

If you’ll take this out of the Custom CSS:

#navigation li.current-menu-item a {
	color: #000000;
}

I think that’ll return them to white for you.

---

The social icons are made with an image. You can replace them if you’d like to. If you have an icon set you want to use already, the Nav Menu Images plugin (https://wordpress.org/plugins/nav-menu-images/) would probably be the easiest way to swap those around.

If you run into trouble, let me know.

Take care,
Bill

[Jeroen van Aerle]

He Bill,

I’m trying to change the social media icons using the Menu Icons plugin (seemed more up-to-date). In the social media menu I managed to to change the icons using some uploaded to my media library but they are not showing up. In the FAQ of the plugin this is what they say:

The icons are not showing!

Make sure that your active theme is using the default walker for displaying the nav menu. If it’s using its own custom walker, make sure that the menu item titles are filterable (please consult your theme author about this).

Do you maybe now how I can fix this? Many thanx!

Jeroen

[Bill Robbins]

Joren,

I think if you take out the CSS classes form the navigation menu items there, the images should be visible. That’s what I would try first.

If that doesn’t do the trick you can add this to your Custom CSS:

#social li.dribbble a,
#social li.email a,
#social li.facebook a,
#social li.flickr a,
#social li.foursquare a,
#social li.forrst a,
#social li.google a,
#social li.github a,
#social li.instagram a,
#social li.itunes a,
#social li.linkedin a,
#social li.pinterest a,
#social li.twitter a,
#social li.youtube a,
#social li.vimeo a,
#social li.yelp a,
#social li.podcast a,
#social li.rss a {
	text-indent: 0;
	background-image: none;
}

Bill

[Bill Robbins]

I think this will hide that for you:

span.screen-reader-text span {
	display: none;
}

[Author]

Posts