user3696598 user3696598 - 6 months ago 11
CSS Question

Wordpress Twenty Twelve - Social icons in navigation menu

Im tryin to get social icons in to my navigation menu. I've done the following steps:


  1. Add new link to navigation

  2. Css class example "menu-twitter"

  3. Createad a mapp in child-theme folder "images"

  4. Imported twitter.png

  5. added following code in to style.css

    .menu-facebook {
    text-indent: -9999px;
    background-image: url(images/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    }

    .menu-facebook a:hoover {
    background: #f5f5f5 !important;
    }

    .menu-twitter {
    text-indent: -9999px;
    background-image: url(images/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    }

    .menu-instagram {
    text-indent: -9999px;
    background-image: url(images/instagram.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;
    }

    .menu-instagram a:hoover {
    background: #f5f5f5;
    }



Check out my site hkochd.suplife.se

I can't click on it and its positioned very wierd, what am I doing wrong?

*sorry for bad english.

Answer

The problem here is, links are anchored with the <a> tag inside the <li> tag. By your code you are indenting the anchor out of the page.

To avoid this you can apply the css to the tag rather than the <li> tag.

Here is the modified code that should work

.menu-facebook a {
    text-indent: -9999px;
    background-image: url(images/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-facebook a:hover {
    background: #f5f5f5 !important;
}
.menu-twitter a {
    text-indent: -9999px;
    background-image: url(images/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-instagram a {
    text-indent: -9999px;
    background-image: url(images/instagram.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-instagram a:hover {
    background: #f5f5f5;
}
Comments