{"id":2928,"date":"2015-07-01T11:36:44","date_gmt":"2015-07-01T10:36:44","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=2928"},"modified":"2019-09-19T10:44:21","modified_gmt":"2019-09-19T09:44:21","slug":"add-social-links","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/add-social-links\/","title":{"rendered":"How to add social media icons to your menu"},"content":{"rendered":"

Step 1. Add a new Custom Link to your menu<\/h3>\n

\"social-link-custom-link\"<\/a><\/p>\n

Save the menu once the link has been added.<\/p>\n

Step 2:\u00a0Open the Mega Menu settings for the new menu item<\/h3>\n

\"social-link-megamenu-settings\"<\/a><\/p>\n

Step 3: Align the menu item to the right and hide the menu text<\/h3>\n

\"social-link-settings\"<\/a><\/p>\n

Step 4: Set an icon<\/h3>\n

\"social-link-icon\"<\/a><\/p>\n

Step 5: Optional step for Max Mega Menu Pro users<\/em>.<\/h3>\n

Set a custom image icon<\/p>\n

\"\"<\/a><\/p>\n

End Result:<\/h3>\n

\"social-link-end-result\"<\/a><\/p>\n

Displaying social icons on a single line in the Mobile Menu<\/h2>\n

By default each social icon\/menu item will be displayed on it’s own row in the mobile menu.<\/p>\n

There are 2 options to change this.<\/p>\n

Option 1<\/strong><\/p>\n

Enable the “Hide on Mobile” setting for each of your social icon menu items, then add them as Mobile Toggle Blocks<\/a> instead.<\/p>\n

Option 2<\/strong><\/p>\n

Go to Mega Menu > Menu Themes > Custom Styling<\/em> and add the following (make sure you update line 7):<\/p>\n

@include mobile {\r\n    #{$wrap} {\r\n        float: left;\r\n        width: 100%;\r\n    }\r\n    #{$wrap} #{$menu} > li.mega-social-icon {\r\n        width: 50%; \/* UPDATE THIS: 100 \/ Number of social icons *\/\r\n        float: left !important;\r\n        clear: none;\r\n    }\r\n    #{$wrap} #{$menu} > li.mega-social-icon > a.mega-menu-link {\r\n        text-align: center;\r\n    }\r\n}<\/pre>\n
Add a Custom Menu Item Class<\/a> of “social-icon” to each of your social icon menu items.<\/p>\n","protected":false},"excerpt":{"rendered":"
Step 1. Add a new Custom Link to your menu Save the menu once the link has been added. Step 2:\u00a0Open the Mega Menu settings for the new menu item Step 3: Align the menu item to the right and hide the menu text Step 4: Set an icon Step…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-2928","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faqs"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"Step 1. Add a new Custom Link to your menu Save the menu once the link has been added. Step 2:\u00a0Open the Mega Menu settings for the new menu item Step 3: Align the menu item to the right and hide the menu text Step 4: Set an icon Step...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=2928"}],"version-history":[{"count":7,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2928\/revisions"}],"predecessor-version":[{"id":213613,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2928\/revisions\/213613"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=2928"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=2928"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=2928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}