CODEWITHSUNDEEP
csswordpress
ng_07
ng_07

Reputation: 33

Wordpress Menu for Social Icons

I'm trying to use the wordpress custom menu to allow users to link their social media sites easily. So far I set up a wordpress menu "Social Icons" in my functions.php theme file and am using the custom menu widget to place it on the site. This is the html wordpress generated for the menu and widget 

<div class="menu-social-icons-container">
<ul id="menu-social-icons" class="menu">
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73"><a href="http://facebook">Facebook</a></li>
<li id="menu-item-74" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-74"><a href="http://twitter">Twitter</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76"><a href="http://instagram">Instagram</a></li>
<li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-77"><a href="http://youtube">Youtube</a></li>
</ul>
</div>

I'm assuming the id "menu-social-icons" is due to either the theme location or menu name I created so IF the id is based upon that I could use this method to allow users to link up their social media icons. Will the id "menu-social-icons" be the same for any user that uses this theme, or is it a generated id like "menu-item-73" in the li.

If it will be the same, I am trying to style the nth child a elements to backgrounds of the icons but I'm confused as to which selectors to use in css because for example if I use

ul#menu-social-icons li a:link:nth-child(1){
background-img:url(images/facebook.png);
}

ul#menu-social-icons li a:link:nth-child(2){
background-img:url(images/twitter.png);
}

ect

I don't get anything

What selectors do I need to use to style achieve this?

Upvotes: 0

Views: 836

Answers (1)

jogesh_pi
jogesh_pi

Reputation: 9782

consider to this example http://jsfiddle.net/jogesh_pi/d85Ae/ 

<ul>
   <li><a href="#link1">link1</a></li>
   <li><a href="link2">link2</a></li>
   <li><a href="link3">link3</a></li>
   <li><a href="link4">link4</a></li>
</ul>

CSS

ul li:nth-child(1) a{ color: #ff0000; }
ul li:nth-child(2) a{ color: green; }
ul li:nth-child(3) a{ color: #ff9900; }

Note: Make sure about the path of images that you want to implement on the menus

Upvotes: 1

Related Questions