CODEWITHSUNDEEP
csstextmenuiconshide
level42
level42

Reputation: 987

Hiding text in a navigation menu

I found this tutorial online to add menu icons to a wordpress navbar: http://www.wpexplorer.com/adding-images-wordpress-menu/

Which I followed and seems to work great. However, I need to hide the text labels for my menu so that I have just the icons showing.

I found this which is supposed to hide the text: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Which again, seems to work great, but it leave about a 400px section of white space in the menu.

As you can see here: goo.gl/46yUrt

My code:

.twitter-icon a{
   padding-left: 30px !important;
   background-image: url(images/icons/Twitter-01.png);
   background-position: left;
   background-repeat: no-repeat;
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

.twitter-icon a:hover{
   padding-left: 30px !important;
   background-image: url(images/icons/Twitter-02.png);
   background-position: left;
   background-repeat: no-repeat;
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

Please let me know if you need anymore details (FYI I'll be AFK for a couple hours)

Upvotes: 0

Views: 4109

Answers (1)

karolkochan
karolkochan

Reputation: 140

There is something really bad in behavior of your social nav, but if you want to have image icons in all 4 socials, you could try setting:

padding: 17px 10px;
font-size: 0px;

on your .nav-social li a class.

Also, you need to veryfy element with classes screen-reader-text skip-link which overflows over social navs so they mouse over effect fails.

Upvotes: 2

Related Questions