Featured Theme › Forums › Bootville Lite › How to: Add Social Media menu to Header
Tagged: bootville-lite, menu area, social media, widget area
This topic contains 6 replies, has 2 voices, and was last updated by zeaks 2 weeks ago.
-
AuthorPosts
-
September 14, 2015 at 4:11 pm #17927
Bootville Lite comes with a social links menu that displays in the header area to the right of the site title. Here’s how you can use it.
1. Visit Appearance > Menus
2. Create a new menu, name it whatever you like ( social menu works )
3. On the left click “Custom Links” type in the URL to your Facebook profile for example, in the Link text add whatever you like it is the facebook URL that tells the menu what icon to display.
4. Save the menu and add it to the “Social Links menu” area and save.
5. Refresh your site and you should see a Facebook icon in the header area.Here is a list of available icons you can add to the social menu.
- plus.google.com
- instagram.com
- linkedin.com
- pinterest.com
- twitter.com
- github.com
- wordpress.com
- facebook.com
- youtube.com
- mailto:
- feed/
If you don’t see one that you would like to have added to Bootville Lite leave a comment and I’ll make sure to include it in the next update and show how you can add your own!
November 2, 2015 at 12:24 am #18053I am brand new to wordpress and trying to figure out how to use it. I installed the Bootville Lite theme which is very nice. I was surprised I could not simply add my own icons.
Anyway, could you add an icon for twitch.tv?
November 2, 2015 at 12:41 am #18054You can add any Font Awesome icons that are available here https://fortawesome.github.io/Font-Awesome/icons/
Twitch.tv is one that’s included. You can create a child theme to do this or add it using a Custom CSS plugin, or add it to the style.css. Adding it to style.css will not protect it from being overwritten during an update but I will add this service to the next update anyways.
Add this CSS using one of the above methods.
#menu-social li a[href*="twitch.tv"] { background:#6441A5;} #menu-social li a[href*="twitch.tv"]:before { content: "\f1e8"; }
Then just add your twitch TV link to the social menu ad you would any other.
November 2, 2015 at 2:17 am #18055Hmmm, the youtube and twitter icons appeared automatically but twitch did not. I will have to see what I missed.
November 2, 2015 at 4:39 am #18056Visit Menus > your social menu that you created,on the left click “custom links” add your Twitch URL to the url section, and Whatever you want as the Link Text, click “Add to Menu”, then save it and refresh your website.
If you can’t get it to work and want me to log in and take a look use the Contact link at the top of this page to email me.
November 2, 2015 at 12:00 pm #18057Ah I added your code and it worked! Thank you zeaks. I was confused when you wrote “Twitch.tv is one that’s included.” I assumed that meant the code was included.
I really enjoy the design. The only I didn’t like was not being able to remove the top Nav Menu, since I personally have no use for it. But I was able to remove the code in header.php
November 2, 2015 at 5:46 pm #18060Glad you got it working. The nav menu is almost required in a theme, usually if there are two menus I’ll add an option to disable either one but if you edited the header and removed it that’s fine. Just remember when there is an update your modifications will be overwritten if you didn’t use a child theme http://zeaks.org/how-to-create-a-wordpress-child-theme-and-why/
-
AuthorPosts
You must be logged in to reply to this topic.