WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. flutteraaron
    Member
    Posted 1 year 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 1 year ago #

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

  3. flutteraaron
    Member
    Posted 1 year ago #

    sorry about that.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

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

    Comments must start with these characters;

    /*
  5. flutteraaron
    Member
    Posted 1 year 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 1 year ago #

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

  7. flutteraaron
    Member
    Posted 1 year 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 1 year 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 1 year 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