Add Social Buttons to Menu

[PedroGalego83]

Hi,

Is it possible to add social buttons to the menu?
I’m using Integrity 4 Demo and I would like to add social buttons to the bottom of the menu.

Thanks,
Pedro Galego

[jordanj]

Hello there,

You may add social buttons to your menu in WordPress yes

You would need to add the social icons / links as custom links within your WordPress menu.

Specify the URL and then in the link text you will need to add the icon in the following format:

<i class="x-icon x-icon-facebook-square" data-x-icon="&#xf082;"></i>

For an icon reference please check here:

http://fontawesome.io/cheatsheet/

I hope this helps.

[PedroGalego83]

Hi,

Can you help me now placing the icons on the bottom of the menu?
Like this: https://ibb.co/nw8mam

Thank you,
Pedro Galego

[ruenel]

Hello Pedro,

Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Add social icons to primary menu
// =============================================================================
function add_social_icons(){ ?>
  
  <div class="custom-social-icons mal">
  
  <?php x_social_global(); ?>
  
  </div>

<?php }
add_action('x_after_view_global__nav-primary', 'add_social_icons');
// =============================================================================

You might need some custom css to align the icons. If that happens, please provide us the url of your site so that we can give you a tailored css solution.

Please let us know how it goes.

[PedroGalego83]

Hi,

The url is: http://testesite.epizy.com/wp/

I would like it just aligned to the center of the menu.

Thank you,
Pedro Galego

[Joao]

Olá Pedro,

Please add the following code to Theme Options CSS

.x-social-global a {
      display: block;
    font-size: 30px;
    margin-bottom: 13px;
}

Hope it helps