How to add social media links to navigation bar

Honza Felt
asked 10 years ago

Hi guys,
I was wondering, is it possible to make put social media buttons on the top navigation bar? Just like here…
Thank you for your insight!

2 Answers

Wilfred
answered 10 years ago

Hi Honza,
To resolve this issue, please follow my instruction here:
1. Open file header.php in /wp-content/themes/dw-page/header.php
2. Add following code to line 26

<ul class="socials pull-right visible-desktop">
 <li class="social facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
 <li class="social twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
 <li class="social google_plus"><a href="#/"><i class="fa fa-google-plus"></i></a></li>
 <li class="social youtube"><a href="#/"><i class="fa fa-youtube"></i></a></li>
 <li class="social linkedin"><a href="#/"><i class="fa fa-linkedin"></i></a></li>
 </ul>

Image below for further checking: http://i.imgur.com/KZnTlww.png
3. Add following code to header code in Dashboard / Appearance / Customize / Custom code / Header code

<style>
.navbar .socials li {
display: inline-block;
line-height: 60px;
font-size: 18px;
padding: 0 5px;
}
.navbar .socials li a {
color: #555;
}
.navbar .socials li a:hover{
color: #fff;
}
</style>

Hope this helps !

Honza Felt
replied 10 years ago

Yes! It worked. Thank you so much, gt!

Lucy
replied 10 years ago

Do you know how could I add an icon that the theme hasn’t provided?

Wilfred
answered 10 years ago

Hi Lucy,
You can find the icon at following link http://fontawesome.io/icons/ (DW Page used fontawesome 4.0.3) or you can use an image. Example:

 <li class="social"><a href="#"><img src="http://placehold.it/16"></i></a></li>

Hope this hleps!

Lucy
replied 10 years ago

I am sorry where do I past this code you provided? I would like to use an imdb icon, since it is a movie website. How could I do that?

Dominic Staff
replied 10 years ago

Apologies for the delay in replying to you.
You can add this code to the header.php file as Wilfred provided, then add imdb image in the Media and copy the FILE URL on right hand side replace the following link: http://placehold.it/16 with your FILE URL.