How to add social media icons to your menu
Step 1. Add a new Custom Link to your menu
Save the menu once the link has been added.
Step 2: Open 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 5: Optional step for Max Mega Menu Pro users.
Set a custom image icon
End Result:
Displaying social icons on a single line in the Mobile Menu
By default each social icon/menu item will be displayed on it’s own row in the mobile menu.
There are 2 options to change this.
Option 1
Enable the “Hide on Mobile” setting for each of your social icon menu items, then add them as Mobile Toggle Blocks instead.
Option 2
Go to Mega Menu > Menu Themes > Custom Styling and add the following (make sure you update line 7):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@include mobile { #{$wrap} { float: left; width: 100%; } #{$wrap} #{$menu} > li.mega-social-icon { width: 50%; /* UPDATE THIS: 100 / Number of social icons */ float: left !important; clear: none; } #{$wrap} #{$menu} > li.mega-social-icon > a.mega-menu-link { text-align: center; } } |
Add a Custom Menu Item Class of “social-icon” to each of your social icon menu items.