css - Wordpress Twenty Twelve - Social icons in navigation menu -
im tryin social icons in navigation menu. i've done following steps:
- add new link navigation
- css class example "menu-twitter"
- createad mapp in child-theme folder "images"
imported twitter.png
added following code in 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 site hkochd.suplife.se
i can't click on , positioned wierd, doing wrong?
*sorry bad english.
the problem here is, links anchored <a>
tag inside <li>
tag. code indenting anchor out of page.
to avoid can apply css tag rather <li>
tag.
here modified code should work
.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:hover { 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:hover { background: #f5f5f5; }
Comments
Post a Comment