Hide title item of menu in WP

  • Resolved zazzou

    (@zazzou)


    4 years, 6 months ago

    Hello !

    I have a menu footer in my theme wordpress and I used ACF to display a new field for icons.
    I want to display my menu just with icons without the title items.
    How can I do this ?
    I use this code to display the menu : 

    <?php
if ( has_nav_menu( 'footer-menu' ) ) : ?>
<?php 
wp_nav_menu(array(
'theme_location'    => 'footer-menu',
'container'       => 'div',
'container_id'    => 'main-nav',
'container_class' => 'justify-content-end',
'menu_id'         => false,
'menu_class' => 'my-footer-menu',
));
?>
<?php endif;
?>

    Thanks for help

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    It depends on how your icons are implemented. A live link to a page demonstrating your menu would be helpful. You could simply hide the text portion with CSS, but exactly how to hide the text without hiding the icon as well depends on how the HTML is structured.

    You might need to wrap the text in its own <span> tags so it can be targeted apart from the icon. This could be done manually or by code hooked to “wp_nav_menu” filter. Filter code could simply strip out the text, leaving the only the icon, but screen readers might find text hidden by CSS more accessible.

    Thread Starter zazzou

    (@zazzou)

    Thanks.
    The icons are implemented with a field ACF and then the code looks like this : 

    <ul class="social-links">
	<li><a href="xxx" target="_blank" rel="noopener" title="facebook" class="facebook">Facebook<i class=fab fa-facebook"></a></li>
	<li> <a href="xxxx" target="_blank" rel="noopener" title="twitter" class="twitter">Twitter<i class=fab fa-twitter"></a></li>
	<li> <a href="xxxx" target="_blank" rel="noopener" title="youtube" class="youtube">Youtube<i class=fab fa-youtube"></a></li>
</ul>
    Moderator bcworkz

    (@bcworkz)

    The text labels would need their own <span> tags so they can be targeted with CSS independent of the <i> tag. Or the <i> tag needs its own <a> tag.

    Thread Starter zazzou

    (@zazzou)

    Thanks
    So it’s not possible to hide this element without using CSS ?

    Moderator bcworkz

    (@bcworkz)

    I wouldn’t say impossible, but it may be beyond my CSS skills with the current HTML. My first inclination would be to alter the HTML to make CSS easier. The output is filterable, or you could manually add the needed tags in the menu UI. If you must work with the current HTML, maybe limit the container size to only the icon size so the text becomes hidden overflow?

    Thread Starter zazzou

    (@zazzou)

    Thanks !

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Hide title item of menu in WP’ is closed to new replies.