WordPress.org

Forums

[resolved] Social media icons in navigation bar in Twenty Eleven (9 posts)

  1. flutteraaron
    Member
    Posted 2 years ago #

    Hello, (Any help is GREATLY appreciated)! Thanks in advance:)

    I have read threads and watched several tutorials on how to add social media icons in the navigation bar in twenty eleven.

    I successfully created one here for twitter but the facebook tab does not connect with the icon and drops below the navigation bar on a second line---(I would like the facebook icon to be beside the twitter on the navigation bar)---

    http://www.yogagypsy.com/

    Can anyone tell me why it is not working for facebook? And why the tab is dropping below the bar?
    Here is the code I added at the bottom of my child theme css:

    /* Twitter Icon */

    .menu-twitter {
    text-indent: -9999px;
    background-image: url(http://www.yogagypsy.com/wp-content/uploads/2013/01/iconsetc_twitter.png) !important;
    background-repeat: no-repeat´╗┐ !important;
    margin-left: 100px !important;
    width: 42px;
    height: 42px;

    }

    /* Facebook Icon */

    .menu-facebook {
    text-indent: -9999px;
    background-image: url(http://wwwyogagypsy.com/wp-content/uploads/2013/01/iconsetc_facebook_logo.png) !important;
    background-repeat: no-repeat´╗┐ !important;
    margin-left: 100px !important;
    width: 42px;
    height: 42px;

    }

  2. Andrew
    Forum moderator
    Posted 2 years ago #

    Please don't make a habit of typing in uppercase like that, it's considered as shouting.

  3. flutteraaron
    Member
    Posted 2 years ago #

    sorry about that.

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    You have a syntax error below your twitter style, here;

    ----------------------------------------------- */

    Comments must start with these characters;

    /*
  5. flutteraaron
    Member
    Posted 2 years ago #

    Thank you... I made the correction but the face book tab still will not pick up the icon as it is directed to and the tab is dropped down to the second line... do you know of any possible solutions?

    Thanks again for your time,

    Aaron

  6. Andrew
    Forum moderator
    Posted 2 years ago #

    You still have a syntax error on that same line
    http://www.w3schools.com/css/css_syntax.asp

  7. flutteraaron
    Member
    Posted 2 years ago #

    Thank you for your response- I think I fixed the syntax error:

    but the issue still exists that the face book icon drops down to the second line...

    any suggestions would be greatly appreciated.

    http://www.yogagypsy.com/

    Thanks,

    Aaron

  8. Andrew
    Forum moderator
    Posted 2 years ago #

    I don't see the issue that the Facebook icon drops into the second line http://awesomescreenshot.com/02drpqffd . Have you resolved the issue? If so, mark the thread resolved. If you're not seeing what I'm seeing, clear your browser's cache.

  9. flutteraaron
    Member
    Posted 2 years ago #

    I'm so sorry but the problem is the facebook icon is below the twitter icon. It needs to be on the same baseline as the twitter- either to the left of it or right of it. That is the issue...

Topic Closed

This topic has been closed to new replies.

About this Topic