Icon only menu items

[mklappen]

Hi, I have been reading documentation and issues and I don't seem to find a case where the menu links/items are an icon only. That is there is no "link text". I simply want the icon alone (i.e. facebook, twitter, youtube) to be the link itself.

Enter in the URL and Title Attribute, while leaving the navigation label blank and the menu item simply disappears when I "Save Menu".

Thanks in advance for any advice/tips.

[pattonwebz]

Hey @mklappen,

I don't believe there is a way to add just icons in the menu with the walker. If you are still looking for a way to hide the text inside links though you could it with CSS maybe.

Let me know if you are still looking for a solution to this one and I'll help however I can.

[TMMC]

I have managed to do it, but I do not like the way it is done (sorry if this is OT). In Navigation Label put <span class="sr-only">Some name</span> - it is rendered as standard html at least in my case. The problem is the title attr for the link - it shows glyphicon class (sic!)

[pattonwebz]

Using the .sr-only class is how I think I would have done this as well. Having the text in the markup but not rendered still allows it to be useful for screen readers :)

As for the issue with title attr - I'm aware of that being a problem and have solved it in a branch I've been working on for BSv4. I do want to backport the fix to the master branch too but it's sort of a breaking change as it swaps from using title attr to add icons to using the class inputs instead (leaving title usa available for it's intended purpose).

You could take a look at the v4 branch for the updated approach to adding icons to the items which could be used to fix the issue of glyphicon class being added to the title attr

[TMMC]

@pattonwebz, I was thinking exactly the same thing - to use classes, let's say ni_disabled if item is to be disabled, ni_hidetext if the text is to be hidden and ni_glyphicon-anyofthem to generate the icon. And in the output remove the ni_ classes from li. Prefix ni_ stands for 'nav item'.

[pattonwebz]

@TMMC I would probably make use of the default classes like the .sr-only class rather than add more prefixed classes that need parsed and modified at output.

[TMMC]

@pattonwebz, but it would apply those classes to list item in preview mode for examle if I am not wrong of course. Well I'm not a WP expert at all and it might be not the right approach. I made a gist: https://gist.github.com/TMMC/81012f34048187ffa91fe331bf9db55c - the code is far from perfect but for now it works for me - I've put it all together basing on this: http://bit.ly/2uR6Vzo and wp-bootstrap-navwalker. Most of manipulations with icons and .sr-only are in lines 22-50. In my case I've ignored dropdowns headings and dividers.

[pattonwebz]

@TMMC sorry to take to long to get back to you. Your solution looks like an acceptable way to make it work like you need. I looked at adding this feature to the walker and it requires some additional parsing work and introduces some specific complexities with how the walker currently works when I tried to fit it in along with the current icon support.

I realise this does not help you with the current walker but I have reworked icon support for the BS4 update (the v4 branch) to this walker though and icon only menu support is simpler to implement.

[pattonwebz]

Icon only menu support will be pushed to the v4 branch in the next 1-2 weeks. I think that backporting the feature to the BS3 version might be too complicated but I will give it a try and see how it goes :)

[pattonwebz]

I'm going to close out this issue now. Full icon only support was added to the v4 https://github.com/wp-bootstrap/wp-bootstrap-navwalker/pull/339/commits/122b865740077cadf44090e6002b9e164aa46c6e branch and I will be moving that into master as soon as I can be sure it's tested well enough to say it's completely stable.

Thank you for the feature request. I am sorry I was unable to spend time adding it back at the point when you opened this issue.