Add text and social icons just after the search icon in the header menu

[Mejdoub]

hi i’m new to wordpress and to themes so sorry if my questions seems to be easy for others.
my site http://www.marketingtunisie.com/ i need to add some text and social icons in the menu like this

thanks

[Joao]

Hi There,

On X you can add them to the top bar.

Go to X > Theme Options > Header and turn on your topbar content.

On Theme Options > Social > You can add the URL of the social medias you want to appear.

Let us know if this solution works for you.

Thanks!

[Mejdoub]

they will not be on the same line as the menu

[jade]

Hi there,

There is currently no option available out of the box in the theme for what you are aiming to do.

What I can suggest is for you to do a bit of customization and install the child theme then add this code in the _navbar.php file in /wp-content/themes/x-child/framework/legacy/cranium/headers/views/global:

<?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; ?>

Kindly add this custom CSS as well:

.x-navbar .x-social-global {
    float: right;
}

The code provide provided above will do the following: add the social icons that you set in Theme Options to the menu area and align the social icons to the right of the menu.

You might have to write your own custom CSS to further style and align the icons that are added in the menu.

Hope this gets you started.

[Mejdoub]

• Add the text before icon
• Change the icons from icons to images

[Joao]

Hi There,

Please add the following CSS to Theme Options CSS

.x-topbar .p-info a {
 
    border: 0px;
}

.x-topbar .p-info a {
 
 float: right;
}

.x-topbar .x-social-global {
display: none;
}

And add the following code to your topbar content and adjust the correct image URLS and other parameters according to your taste.

Your text goes here

<a href="www.facebook.com" class="facebook" title="Facebook" target="_blank" style="outline: none;">

<img style="max-width:50px; padding-right: 5px; padding-left:5px;" src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png"></a>

<a href="www.twitter.com" class="twitter" title="Twitter" target="_blank"><img style="max-width:50px; padding-right: 5px; padding-left:5px; "src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png"></a>

<a href="www.googleplus.com" class="google-plus" title="Google+" target="_blank"><img style="max-width:50px; padding-right: 5px; padding-left:5px; "src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png"></a>

<a href="www.linkedin.com" class="linkedin" title="LinkedIn" target="_blank"><img style="max-width:50px; padding-right: 5px; padding-left:5px; "src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png"></a>

<a href="www.youtube.com" class="youtube" title="YouTube" target="_blank"><img style="max-width:50px; padding-right: 5px; padding-left:5px;" src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png"></a>

<img style="max-width:50px; padding-right: 5px; padding-left:5px;" src="https://www.seeklogo.net/wp-content/uploads/2016/09/facebook-icon-preview-1-400x400.png">

Hope it helps!

[nabeel]

Hi @Mejdoub,

I accidentally edited your post instead of replying you, however I edited your post with your requirement, sincere apologies for that. To achieve what you need, follow the below steps:

• To add the the text before the social icons, you can remove the text first from top-bar content and then add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.x-topbar .x-social-global:before {
    content: 'We are social';
    margin-right: 5px;
}

• You can customize the social icons with custom CSS instead:

.x-icon-facebook-square {
    color: #5f96fe;
}
.x-icon-twitter-square {
    color: #38b4ff;
}
.x-icon-google-plus-square {
    color: #f35353;
}
.x-icon-linkedin-square {
    color: #009fff;
}
.x-icon-youtube-square {
    color: red;
}

Hope this helps!

[Mejdoub]

thanks a lot for your help

[paul.r]

You’re welcome!