Menu icon Foundation
How to add social media icons in Top bar nav & is visible in all devices?

Hi,

I was wondering how we could add social media account icons/links on the top menu nav & make it visible across all devices, in a easy way, so that the user can able to modify them at ease?

Foundationsocial mediatop barnav

Hi,

I was wondering how we could add social media account icons/links on the top menu nav & make it visible across all devices, in a easy way, so that the user can able to modify them at ease?

Jeff Kinley over 5 years ago

I have been working on this too and as of yet, I have been unable to make it work. It's tricky, because the icons are a font and not a background image. It seems as though you could add a class in the Wordpress menu admin panel. However this adds the class to the and not an as in the documentation. Any one have some ideas?

Jeff Kinley over 5 years ago

I also tried hardcoding a list into the topbar of my header.php. But when I try to make them larger, they bust out of the topbar. Have not discovered how to fix it yet. Very surprised that this is not a more common request. Topbar would be great for social icons.

Jeff Kinley over 5 years ago

Ok. I finally got the social icons in the topbar and found the css necessary to make the icons big enough. So first, here is the html to put a list of social icons on the right side of the topbar:

<ul class="right">
      <li><a href="#" title="Follow Us On Facebook"><i class="fi-social-facebook"></i></a></li>
      <li><a href="#" title="Follow Us On Google Plus"><i class="fi-social-google-plus"></i></a></li>
      <li><a href="#" title="Follow Us On YouTube"><i class="fi-social-youtube"></i></a></li>
      <li><a href="#" title="Follow Us On Linked In"><i class="fi-social-linkedin"></i></a></li>
      <li><a href="#" title="RSS Feed"><i class="fi-rss"></i></a></li>
     </ul>

When you do that, the icons appear but they are very tiny. So I finally found the css to make them bigger without breaking the topbar:

ul.right li a {font-size: 1.3rem;}

That may not be the best solution, but it seems to be working for me. Any other ideas?

https://www.dropbox.com/s/ckvthyvaylgmbgx/Screenshot%202014-02-12%2011.10.42.png

Rejji Fubara over 5 years ago

To add a social media icon nav menu to the top-bar, you just create another un-ordered list with a class of "right" and write out the list items for it...A good font icon generator is font-awesome from http://www.fontawesome.io ...here is what i did to make them larger without breaking the row..

<!--Begin navigation-->

        <ul class="left">
          <li class="active"><a href="index.html">Link 1</a></li>
          <li class="has-dropdown"><a href="#">Link 2</a>
              <ul class="dropdown">
                  <li><a href="#">sublink 1</a></li>
                  <li><a href="#">sublink 2</a></li>
                  <li><a href="#">sublink 3</a></li>
                </ul>
              </li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>


            <ul class="right">
          <li><a href="#"><i class="fa fa-facebook fa-2x"></i></a></li>
          <li><a href="#"><i class="fa fa-twitter fa-2x"></i></a></li>
          <li><a href="#"><i class="fa fa-youtube fa-2x"></i></a></li>
          <li><a href="#"><i class="fa fa-google-plus-square fa-2x"></i></a></li>
          <li><a href="#"><i class="fa fa-flickr fa-2x"></i></a></li>
        </ul> 

    </section>
</nav><!--end top-bar-->    

<!--end 12 columns-->

<!--end row-->
<!--End Navigation-->

jenny almost 2 years ago

If you need any help regarding the instagram hack online you can visit this website and get some information on how to hack instagram.

Howard Garrett over 1 year ago

Very helpful!