- This topic has 13 replies, 3 voices, and was last updated 6 months, 1 week ago by
David.
-
AuthorPosts
-
February 8, 2020 at 3:50 pm #1159204
HEATHER
Hi can anybody walk me through putting my social media icons in the top right section of my header? Thank you.
February 8, 2020 at 3:55 pm #1159207Leo
StaffCustomer SupportHi there,
Try Lightweight social icons in the header widget area:
https://en-ca.wordpress.org/plugins/lightweight-social-icons/
https://docs.generatepress.com/article/header-widget/Let me know if this helps ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 20, 2022 at 6:25 am #2288384melonbird
This doesn’t work if you have “Use Navigation as Header” checked. Is there an alternative method that would display it inline on desktop and in the mobile menu under the normal menu? Or a way to add them to the normal menu?
July 20, 2022 at 7:35 am #2288446David
StaffCustomer SupportHi there,
for it to appear as part of the normal mobile dropdown menu then the icons would have to be added as items in your menu.
The Navigation Label in a menu item does support HTML.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 22, 2022 at 6:02 am #2290532melonbird
I tried adding a Custom Label to the menu with the HTML from source code from the Lightweight Social Icons plugin copied into the Navigation label. Nothing is showing.
July 22, 2022 at 6:07 am #2290537David
StaffCustomer SupportCan you share a link to the site ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 22, 2022 at 7:59 am #2290756melonbird
Not able to, sorry.
July 22, 2022 at 8:31 am #2290791David
StaffCustomer SupportOK, see this doc:
https://docs.generatepress.com/article/adding-icons-to-menu-items/
theres a link at the top for a plugin that does it for you
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 22, 2022 at 12:41 pm #2290958melonbird
Thanks. I already looked at these, but both involve adding Font Awesome, which adds weight to the page. Lightweight Social Icons adds a font which Google Pagespeed dings me for on speed. I really just want to add some simple, small icons with links, which I can do as a widget but can’t figure out how to add to the menu. I guess this is a WP issue and a not a GeneratePress issue, though, so I’ll look somewhere else for a solution.
I also tried to do this with Generate Blocks, but couldn’t get it to show up inside the menu rather than in the menu bar.
July 22, 2022 at 2:06 pm #2290986Ying
StaffCustomer SupportI tried adding a Custom Label to the menu with the HTML from source code from the Lightweight Social Icons plugin copied into the Navigation label. Nothing is showing.
SVG code didn’t work in navigation label field, but it seems working now, I just tested on my testing site.
Can you share the source code you entered?
July 23, 2022 at 4:02 am #2291248melonbird
Okay wait. While I was responding to Ying, I realized a mistake I made and fixed that. So now I’ve got them showing in the menu now using the code from Lightweight Social. The only problem is that I’d love them to be in a horizontal row in the mobile menu like they are on desktop. Can that be done with CSS without changing the desktop display?
July 23, 2022 at 10:21 am #2291537David
StaffCustomer SupportTry adding this CSS:
@media(max-width: 768px) { .mobile-menu-open .main-nav>ul { display: flex !important; } .main-nav>ul>li.menu-icon { flex: 0 1 60px; } }
then give each of the icon menu items a CSS class of
menu-icon
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 23, 2022 at 12:39 pm #2291610melonbird
Oh wow – perfect! Thanks for sticking with me on this.
July 24, 2022 at 3:05 am #2291846David
StaffCustomer SupportAwesome – glad to hear that worked ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.