Social Network Links in topbar

Unfortunately this isn’t currently supported but we like your suggestion and will work to add it in a future update.

If you want to code it in open header.php in virtue >> templates

After line 24 add in the links with icon classes.

Ben Ritner
Kadence Themes

Ben, I tried your instruction about adding after line 24 but it’s not working. This is line 24 in the header.php file:

</div><!– close span8 –>

Can you paste here the exact line of code we should place wording after? I’ve tried a few areas and nothing has changed the wording in the topbar.

Thanks.

I played with this a little bit last night. If you just add “hello” in, you can at least get an idea where the text is ending up. I did get far enough to know how to get icons to align properly with the menu on the left side of the bar. That would seem to be a CSS thing, but there should be a css class somewhere in the theme that we could “borrow” for placing the icons.

adam, I added “test” in various places but saw no change in the topbar. I believe the wording was going above the topbar.

Place this code between lines 21 and 22 of header.php (you will need to add real links)

<div class="topbar_social">
            <ul>
              <li>
                <a href="#" class="facebook_link" title="Facebook" target="_blank" rel="tooltip" data-placement="bottom" data-original-title="Facebook">
                  <i class="icon-facebook"></i>
                </a>
              </li>
              <li>
                <a href="#" class="instagram_link" title="Instagram" target="_blank" rel="tooltip" data-placement="bottom" data-original-title="Instagram">
                  <i class="icon-instagram"></i>
                </a>
              </li>
              <li>
                <a href="#" class="pinterest_link" title="Pinterest" target="_blank" rel="tooltip" data-placement="bottom" data-original-title="Pinterest">
                  <i class="icon-pinterest"></i>
                </a>
              </li>
              <li>
                <a href="#" class="dribbble_link" title="Dribbble" target="_blank" rel="tooltip" data-placement="bottom" data-original-title="Dribbble">
                  <i class="icon-dribbble"></i>
                </a>
              </li>
            </ul>
          </div>

Hi guys! Thanks for the post.

First, I’m a novice. Self-taught the whole way through.

Like others, I’m trying to put the social media icons in the header (upper right). I tried the icon tutorial but got stuck on the 4th point as the my search option did not offer the same options.

So, I tried this method with the code between lines 21 and 22. (I took a screen shot to be sure it was nestled in the right spot.) I replaced each “link” with the actual link, replaced the titles with the social media platform and the icon-(fill in the note). Again nada.

What am I missing? My site is https://www.erin-staley.com.
Thanks for any help you can offer.

Forgot to mention that I was working in Editor’s Templates/Header/php. Just Header.php was not an option.

Thanks!

If you are using the editor in wordpress then I’m assuming you counted down the lines. This is inaccurate as long lines that are one continuos sentence are only ever counted as one line of code.

From the link it looks like you put the code to high up on the page. Also as a note the icon links will only ever be on the left side not the right.

Kadence Themes

Thanks so much for the info. With a leap of faith, I did what you suggested, and it worked beautifully.

I couldn’t be happier.

Two thumbs up for creating such a great theme. (I may be in touch soon.)

Cheers!

Well, I had hoped to get further, but when I clicked on the icon, it sent me back to my home page. Here’s an example:

<div class="topbar_social">
            <ul>
             <li>
                <a href="#" class="https://www.facebook.com/ErinStaleyFreelanceWriter" title="Facebook" target="_blank" rel="tooltip" data-		placement="bottom" data-original-title="Facebook">
                  <i class="icon-facebook"></i>
                </a>
              </li>

Thanks!
https://www.erinstaley.com

You’ve put the link in the class

You link should be in href=”YOUR-LINK”
So:

<li>
      <a href="https://www.facebook.com/ErinStaleyFreelanceWriter" class="facebook_link" title="Facebook" target="_blank" rel="tooltip" data-placement="bottom" data-original-title="Facebook">
                  <i class="icon-facebook"></i>
                </a>
              </li>

And that is why you’re the professional! It worked beautifully, of course.

Thank you!

if I wanted to do this for the sidebar how would I go about this?
or is it easier just to use a custom html widget?