Docs

[president75]

Hello,

I added social icons on my menu by following your instructions on the forum.

How do I move them at the end of the menu and transform social icons in [x_icon type = “facebook”] and not [x_icon type = “facebook-square”]

Thanks

[president75]

This reply has been marked as private.

[Joao]

Hi There.

Please add the following code to Appereance > Customizer > Custom > CSS

@media (min-width: 1350px) {

.masthead-inline .desktop .x-nav {
    float: none;
    padding-left: 25%;
}
}
@media (min-width: 1060px) {

.masthead-inline .desktop .x-nav {
    float: none;
    padding-left: 10%;
}
}
@media (min-width: 969px) {

.masthead-inline .desktop .x-nav {
    float: none;
 
}
}

Hope it helps

Joao

[president75]

Hello,

I tried but I can not.

Can you help me to insert social icons as in this site:

http://www.surface85.com/

Thank you

[Jade]

Hi there,

Please try to follow the the suggestion on this thread https://community.theme.co/forums/topic/social-buttons-onin-the-navbar/#post-1037927

Hope this helps.

[president75]

Ok

Now the social icons are located as shown on the screenshot.

How do I get on the right of the menu and change the icons with normal ones “does not square” that is posted as the site for example before!?

[Friech]

Hi There,

I believe you almost did it, but you just need to move your icon menu item to the bottom.

http://prnt.sc/cwidhh

Here are the codes use on your menu

<i class="x-icon x-icon-facebook" data-x-icon="&#xf09a;" ></i>
<i class="x-icon x-icon-twitter" data-x-icon="&#xf099;" ></i>
<i class="x-icon x-icon-google-plus" data-x-icon="&#xf0d5;" ></i>

http://prnt.sc/cwidj6

Hope it helps, Cheers!

[president75]

Hello,

I had used this method:

https://community.theme.co/forums/topic/social-buttons-onin-the-navbar/ #post-1037927

This is because I do not like the social icons you see on the mobile version in less and no longer on the navbar.

I just wanted to know how to move icons created with the php code and put them at the end of the menu link.

I also wanted to change the icons with normal ones.

All this has been done here: http://www.surface85.com/

Thank you

[Jade]

Hi there,

Kindly update the code you got from https://community.theme.co/forums/topic/social-buttons-onin-the-navbar/ #post-1037927 to:

<?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 class="navbar-social"><?php x_social_global(); ?></div>
        </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' ); ?>
          <div class="navbar-social"><?php x_social_global(); ?></div>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Then add this code in the customizer:

.x-social-global i {
    display: inline-block;
    padding: 0 5px;
}
.x-social-global i.x-icon-facebook-square:before {
    content: "\f09a";
}

.x-social-global i.x-icon-twitter-square:before {
    content: "\f099";
}

.x-social-global i.x-icon-google-plus-square:before {
    content: "\f0d5";
}

nav.x-nav-wrap.desktop .x-nav {
    float: right;
}

.navbar-social {
    float: right;
    padding-top: 37px;
}

Hope this helps.

[president75]

Perfect.

Many thanks for the help

😉

[Jade]

You’re most welcome. 🙂

[Author]

Posts