Footer Menu not linking icon using CSS

  • Author
    Posts
  • #14403

    boerneblogger
    Member
    Original poster

    I created a menu on the footer for my social media icons, using custom menu + screen options + css.

    Why are they displaying the text, and not linking directly via the image?

    I set the Link Target button in the custom menu in the Screen Options box…… is this a theme issue or a CSS problem?

    The blog I need help with is: myhillcountrylife.com

    #14584

    Hey Sara,

    You’ll want to target the a tag instead of the li:

    .menu-twitter a {
    background-image: url('http://myhillcountrylife.files.wordpress.com/2012/09/1346964859_twitter-e1346965336619.png')!important;
    background-repeat: no-repeat!important;
    margin-left: 0!important;
    width: 36px;
    height: 36px;
    display: block;
    text-indent: 999px;
    }

    Something like that for an example for your twitter button.

    Kind Regards,
    Scott

    #14595

    boerneblogger
    Member
    Original poster

    Ah
    Almost, almost
    Made that change but the only button that is actually linking is the Pinterest one on the end. Why is that? All code is the same, except the margins.

    THANKS for your help, appreciate it.

    #14643

    Hey Sara,

    I think this will snap the buttons into place:

    #menu-social-media-menu li {
    width: 36px;
    }
    #menu-social-media-menu li a {
    float: left;
    }

    Best Regards,
    Scott

    #14646

    boerneblogger
    Member
    Original poster

    Scott,

    That did it. I am so happy. Thank you thank you…. it was eating away at my mind!!

    I could hug you now.

    Thanks again

The topic ‘Footer Menu not linking icon using CSS’ is closed to new replies.