Adding social media icons on the right side in header menu

[JurgaR]

Hello, I have been searching in the forums, but still don’t seem to figure it out how to insert social media icons on the right side of the header menu. See attached picture of how it looks now and what I am trying to achieve. The menu itself could also be more to the right, or in the centre.
Could you please point me in the right direction?

Thanks a lot!
Best regards,
Jurga
My site is https://fullsuitcase.com

[BaysKitchen]

We added ours by going to Appearance / Menu. Select the menu you want to add them to. Then add a custom link to the menu. Once it’s added you can add the Navigation label for the icon you want to display icons…

< i class=“x-icon x-icon-twitter” data-x-icon=“” aria-hidden=“true”>< /i> for example.

List of icon codes here: http://demo.theme.co/renew-1/shortcodes/icons/

Hope that helps. I cant find the original support article I found this out from.

[jade]

Hi Jurga,

You may follow the suggestion by @BaysKitchen (thanks for helping out ) but you may also override the header template but this will require you to do the customization through the child theme.

You will have to have the child theme installed and activated first then create the following path directory: wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/ then add the _navbar.php in the global directory and add this code in the file:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width"> 
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_social_global(); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Also add this code in the custom CSS panel to align the social icons to the right:

.x-navbar-inner .x-social-global {
    float: right;
    margin-left: 35px;
}

You might need to add a bit more CSS code to further style the icons and the spacing but this should get you started.

Hope this helps.

[JurgaR]

@BaysKitchen this solution looks easier for me and it seems to work - it took me a while to figure out the code that worked, e.g. Facebook square icon had to add this code :

< i class=“x-icon x-icon-facebook” data-x-icon=“” aria-hidden=“true”>< /i>

&#xf082 = the square which shows up here for a strange reason…

I found the list of codes per icon here.

But now I can’t seem to figure out how to let it open in a new tab… Any ideas?
And then I still need to remove the icons from my footer menu, cause now they are double there… Keeps me busy
Thanks

[JurgaR]

Thank you @Jade I already tried this before, but came to the conclusion that my x-child theme doesn’t have legacy folder. I now only have framework/views in my x-child. Is it just a simple copy/ paste of the folder from x-theme to x-child? I am so afraid to mess something up.
Thanks a lot!

[jade]

Hi there,

If you only have the path framework/views inside the x-child folder, you will have to create the following file path legacy/cranium/headers/views/global/ inside the framework folder then do the rest of the instructions in the previous response.

[BaysKitchen]

Sorry, take out the space at the start between here: < i
and the space and the end between here: < /i>
I had to put these in otherwise it read it as html and it didn’t show.

Let me know if that still doesnt work.

[BaysKitchen]

Tick the open in new tab box

[JurgaR]

Thank you @BaysKitchen I figured it all out. Your code was ok, but was showing a square icon instead of the code, which I found (see my edited reply above).
As for opening in new tab, I didn’t have that box to tick, had to first enable it under ‘Screen Options’. Googled it all

Thanks again for your help! Really appreciated

[mldarshana]

@BaysKitchen … Thank you for your contribution.

@JurgaR … Glad you were able to resolve your issues