[Resolved] Question on logo centered / adding icons to menu

[Yael]

Hello,

I’ve followed the KB for centering my logo / split menu and I’m also using the recommended plugin for adding icons to the navigation.

https://staging.starleafwellness.com/

But one of the social media icons to do now show and has a <span class=”visuallyhidden”>LinkedIn</span> assigned to it; it’s the first icon to the left.

I’m wondering if that’s related to the code used to split the menu but honestly I have no idea where this is coming from causing the first icon to be hidden.

It’s not related to the menu icon plugin because all settings there are the same for each menu items

Any ideas?

[Ying]

Hi Yael,

<span class=”visuallyhidden”>LinkedIn</span> It’s added by the menu icon plugin.

And what’s the KB you followed? I don’t recall we recommended using that plugin.

You have GenerateBlocks installed, so you don’t need to install another plugin to add social icons to the menu.

1. Go to appearance > elements, create a new block element.

2. Add a GB’s buttons block to the element, choose a social icon for it, style it, and toggle the remove text option.

3. Add more buttonto the buttonsblock by duplicating the first button.

4. Select Hook as the element type, choose menu_bar_item as the hook name, choose entire site as location, publish the element.

[Yael]

Here’s the KB article

Will the block element work with the split header code that I’m using?

https://docs.generatepress.com/article/centering-logo-navigation/

Thank you, Ying.

[Fernando]

Hi Yael,

I see. The instagram icon seems to have the visuallyhidden class as well.

I’m not sure how this is being added by the plugin. They’re appearing from my end though: https://share.getcloudapp.com/v1uObGEp

Are they hidden from your end? The one not showing from my end is the Facebook Icon, and it seems that the icon class being used isn’t working – dashicons dashicons-facebook-alt. It’s not related to the visuallyhidden class. The visuallyhidden is a selector for CSS rules from the plugin for aesthetic purposes. You can probably try using a different icon.

With regards to the Block Element, yes it should work with Split.

Hope this clarifies.

[Yael]

Well, great, Fernando, I would much rather use the block element than a plugin so I’ll go with that 🙂

Thanks so much.

[Fernando]

You’re welcome Yael! Let us know if you’ll need help, and we’ll be here to assist. 🙂

[Author]

Posts