I want the social icons to the right of the header menu and with a short vertical line to separate exactly like in the example site above.

My site is http://www.maltekramer.net

Please let me know how to achieve it!
Thank you!

Thanks for writing in! Because this requires a template change, I’d advise that you setup 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.

First find the _navbar.php file.

You can find it here: /wp-content/themes/x/framework/views/global/_navbar.php

Copy it and paste it in the relative location in the child theme:

/wp-content/themes/x-child/framework/views/global/_navbar.php

replace the file content with the following:

<?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' ); ?>
          <div class="social_by_nav">
            <ul>
              <li><a href="#"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>
            </ul>
          </div>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>

        </div>

      </div>
    </div>
  </div>

<?php endif; ?>

Then add the following CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.social_by_nav {
    float: right;
    top: 20px;
    position: relative;
    display:inline-block; 
}

.social_by_nav:before {
    content: "|";
    padding-left: 15px;
    color:#ffffff;
}

.social_by_nav ul li {
    list-style:none;
    top:-24px;
    position:relative;
    float:left;
    padding: 0 10px;
}

Hope this helps – thanks!

1) How do I change the colors of the social media icons to white?

2) How do I link each icon to the appropriate social media page?

3) How do I keep the opacity of the header to 0.7 while keeping the opacity of the header font, the icons, the divider line, and the logo at a full 1.0?

Thank you!!

#1. Add the following CSS rule into your Customizer, Custom > CSS section using the menu Appearance -> Customize.

.social_by_nav a {
    color: #fff;
}

#2. Update your links within the code provided above. Follow the example below.

<li><a href="http://www.twitter.com/your-profile"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
<li><a href="http://www.facebook.com/your-profile"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
<li><a href="http://www.youtube.com/your-profile"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>

#3. Try changing the current opacity level to the below value.

.x-navbar {
    opacity: 0.89;
}

Hope that helps.

It seems you are using stacked logo and navigation layout. In that case, replace the entire code from child theme’s _navbar.php file with following:

<?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">
          <div class="social_by_nav">
            <ul>
              <li><a href="#"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>
            </ul>
          </div>
          <?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' ); ?>
          <div class="social_by_nav">
            <ul>
              <li><a href="#"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>
            </ul>
          </div>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>

        </div>

      </div>
    </div>
  </div>

<?php endif; ?>

You can now change the links in both instances of the code as instructed in our last reply.

Thanks!

Please make sure that the data-icon="&#xxxx;" has the actual unicode character.

<ul>
  <li><a href="#"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
  <li><a href="#"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
  <li><a href="#"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>
</ul>

Please copy the raw code here: http://pastebin.com/c40tjcN0

Please let us know if this works out for you.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.