Archived topic
3 out of 4 social icons on mobile only
5 replies · Started by MICHAEL on November 27, 2021
Hi. I added a fourth social media icon in the header of my non-profit's website. Previously had 3, which all appeared and worked fine in all devices. Now in Desktop view the 4 icons appear fine, but in the side menu used by tablet and mobile formats, only the prior 3 icons appear, not the new one added. I looked around in the Additional CSS (even though I am not a coder) but nothing jumped out at me. Please help. Thanks.
Hi Michael,
The two sets of social icons are added in two different widget areas.
The desktop icons are added in the header widget area:
https://docs.generatepress.com/article/header-widget/
The mobile icons are added in the off-canvas widget area:
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area
Make sure to update both.
Let me know if this helps :)
Okay, added it in. Thanks. The total height of the off-canvas menu is a bit longer vertically now than the typical phone, since with four social media icons I had to do 2x2 or else they'd be too small for fingers. Any way to *slightly* tighten the vertical spacing between side-menu menu items, perhaps via some CSS? Thanks.
Try reducing the menu item height option for the off canvas panel:
https://docs.generatepress.com/article/off-canvas-panel-overview/#menu-item-height
Geesh! I don't know how I overlooked that! Problem solved. Thanks!
No problem :)
