Storefront secondary menu social icons showing icons and text

  • Resolved chedface

    (@chedface)


    8 years, 5 months ago

    Hi, I followed this guide and it seemed pretty straight forward: https://docs.woocommerce.com/document/create-a-social-icon-menu/
    The icons are showing up, but I am still getting the navigation label text as well. What am I missing? Here is a screenshot of what I mean: https://i.imgur.com/Cj9TMbH.jpg

    I’ve tried capitalizing the Navigation label fieldand using a lower case. If I just put the label as a space, it kind of words but the alignment gets screwed up and if change more than one’s name just to a space it deletes the previous one from the menu.
    I’ve also tried omitting the https:// and just using https://www.facebook.com and even just facebook.com with no luck.

    Not sure what I am missing. At first I tried just using the icons I needed, but I’ve copied and pasted the whole chunk into my child theme’s style.css. Can anyone help me? I am using the most current storefront theme downloaded last night V 2.1.2. And my Child theme’s style.css doesnt have much in it at the moment as I’ve just started making changes. I have some contact form 7 related stuff and the following:

    .woocommerce-checkout .storefront-primary-navigation,
.woocommerce-checkout .site-search,
.woocommerce-checkout .header-widget-region{
	display: none;
}

@media (min-width: 768px) {
 .site-main ul.products li.product {
	 max-width: 20%;
 }
}

.main-navigation ul li a:before {
  display: none;
}

.secondary-navigation .menu {
	font-size: 1em;
}

.site-info {
    padding: 1.5em 0;
	}

	.site-footer {
		padding: .1em 0 .1em;
	}

    I am on a localhost right now, so I can’t link to the site, but I think I provided all the essential information. I’ve tested in Firefox and Chrome and neither work either. Any help would be appreciated. Thanks a lot!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter chedface

    (@chedface)

    I fixed it and instructions are below in bold is how I ended up fixing it if anyone else is trying to fix this:
    You have to inspect element and find the menu items class and copy each 1 you want to make just an icon and then set each menu item’s number to text-indent: -9999px; it works. So for reference if anyone else ever has this problem here is my example:

    menu-item menu-item-type-custom menu-item-object-custom menu-item-67
menu-item menu-item-type-custom menu-item-object-custom menu-item-64 {
    text-indent: -9999px;
}

    That works. You’ll have to change the menu item numbers with what it shows in the code inspector when you right click and inspect element in your browser for each line of text you want to get rid of. If anyone has a cleaner way of fixing this problem, I would be happy to hear it.

    • This reply was modified 8 years, 5 months ago by chedface.

    I had this issue: I take the code from Woocommerce to “translate” Custom links to social icons, but strangely the text you put in links appeared next to icon.
    In this moment, I have been proving your solution with not success… until I have remove the code… Then I have surprise myself with this: IF YOU PUT ABOVE THE CODE A COMMENT, ICONS ARE NOT ALONE. YOU MUST NOT COMMENT TO SHOW ONLY ICONS. Very and totally weird!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Storefront secondary menu social icons showing icons and text’ is closed to new replies.