How to remove menu label in wordpress

Question

I'm adding svg icons generated from svg sprite file to custom menu, but can't get rid of menu label - in this case name facebook.

Final outputed code looks like this:

<div class="menu-social-links-menu-container">
  <ul id="menu-social-links-menu" class="menu">
    <li id="menu-item-2258" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2258">
      <a href="https://www.facebook.com/....">facebook
        <svg class="icon icon-facebook " aria-hidden="true" role="img">
           <use href="#icon-facebook" xlink:href="#icon-facebook"></use>
        </svg>
     </a>
    </li>
  </ul>
</div>

any idea how to do that?

if it's a wordpress menu label, it's probably something you can change under `appearance` -> `menus`. Look for the `navigation label` in the menu item. If this is something rendered by processing custom PHP code, then you'd probably need to sort through the code and remove whatever echoes the string "facebook" — Justin R., Oct 03 '18 at 16:15
Yes svg tag is included by walker_nav_menu_start_el filter hook, but it is hooking and inserting info right before `` tag and is not interacting with information right after opening `` tag. In apperance -> menu there is nothing about lable options. There schould be some filter hook to hook in menu printing process, but I can't find which one. — Mārtiņš Līgotnis, Oct 04 '18 at 08:45

score 0 · Accepted Answer · answered Oct 03 '18 at 15:03

0

Try :

 .menu-item a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

answered Oct 03 '18 at 15:03

Angel Deykov

1,199
1
9
15

`transparent` is not a valid color property in HTML. Further, if you want to hide an element and not take up any space, you don't set its size to zero, you'd just set its display property to `none`. – Justin R. Oct 03 '18 at 16:09
I should clarify that `transparent` is not a valid font color. You could set `background-color` to `transparent`. – Justin R. Oct 03 '18 at 16:19
transparent is a VALID value (not property!) of the CSS color PROPERTY - http://joxi.ru/Q2KzkV3t4GPW3m – Angel Deykov Oct 04 '18 at 05:58
1

Look my code in action - http://joxi.ru/nAyvlBDTYv047r - http://joxi.ru/YmEzl8dt0aP6J2 AND LOOK display:none in action http://joxi.ru/Vm6ZjvEHDElqZm Please take your negative vote back – Angel Deykov Oct 04 '18 at 06:12
It definitely works in this way, but probably someone knows a filter hook responsible for printing menu labels? – Mārtiņš Līgotnis Oct 04 '18 at 09:00
Just because "it works" doesn't mean it's semantically correct. Text transparency is controlled by opacity. https://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css Your links lead to a site that pulls up a potential Trojan (malware) warning from MalwareBytes, so I won't visit them. You should try posting on a site like jsfiddle instead. And if OP still wanted the space taken up by the original element (which was not specified), then he can use `visibility:hidden` instead of `display:none`. – Justin R. Oct 04 '18 at 19:23
@JustinR. Although you might be correct about text transparency and semantics (I am not sure, since both FF and Chrome don't throw any warnings for text:transparent), you are not correct about display, or visibility property in **this** case. I believe everyone thought about display:none; (or visibility), but it doesn't work if you want to hide only the direct contents (text) of an element, but not it's inner elements (e.g. in ). This is also how I found this thread, and Angel's answer helped me. – Kristián Filo Jul 01 '19 at 09:44

How to remove menu label in wordpress

1 Answers1