{"id":6290,"date":"2017-09-20T13:40:43","date_gmt":"2017-09-20T17:40:43","guid":{"rendered":"https:\/\/med-webguide.sites.unc.edu\/?page_id=6290"},"modified":"2026-05-13T08:13:36","modified_gmt":"2026-05-13T12:13:36","slug":"social-media-menu","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/widgets\/social-media-menu\/","title":{"rendered":"Social Media Menu"},"content":{"rendered":"
\n
\n

A Social Media Menu displays linked social media icons in a widget area, most commonly in the site footer. This is useful when your department, center, or program has official social media accounts that should be available across the site.<\/p>\n

Before adding social media links, make sure the accounts are official, active, and appropriate for your School of Medicine website.<\/p>\n<\/div>\n

\n

\"Screenshot<\/span><\/p>\n<\/div>\n<\/div>\n

Create a Social Media Menu<\/h2>\n
    \n
  1. In the Dashboard, go to Appearance \u2192 Menus<\/strong>.<\/li>\n
  2. Select the create a new menu<\/strong> link.<\/li>\n
  3. Give the menu a clear name, such as Social Media<\/strong>.<\/li>\n
  4. Click Create Menu<\/strong>.<\/li>\n<\/ol>\n

    \"Screenshot<\/span><\/p>\n

    Add Social Media Links<\/h3>\n
    \n
    \n

    Social media links are added to the menu as\u00a0Custom Links<\/strong>.<\/p>\n

      \n
    1. In the\u00a0Add menu items<\/strong>\u00a0panel, expand the\u00a0Custom Links<\/strong>\u00a0section.<\/li>\n
    2. In the\u00a0URL<\/strong>\u00a0field, enter the web address for the social media account.<\/li>\n
    3. In the\u00a0Link Text<\/strong>\u00a0field, enter the name of the platform, such as Facebook, Instagram, or YouTube.<\/li>\n
    4. Click\u00a0Add to Menu<\/strong>.<\/li>\n
    5. Repeat these steps for each social media account you wish to include.<\/li>\n<\/ol>\n<\/div>\n
      \n

      \"Screenshot<\/a><\/span><\/p>\n<\/div>\n<\/div>\n

      Switch the Link Text To An Icon<\/h3>\n
      \n
      \n

      By default, the social media links will display as\u00a0text<\/strong>\u00a0links. To display a social media\u00a0icon<\/strong>\u00a0instead of text, a CSS class must be added to each menu item.<\/p>\n

      Click to expand one of the custom links and enter the corresponding class in the\u00a0CSS Classes<\/strong>\u00a0field.<\/p>\n

      Below is a list of available social media icon classes:<\/p>\n