Thanks for writing in. You didn’t provide us with your URL, so the guide I going to give you wont be as tailored. Next this will require not only CSS but also some changes in structure. Custom Development is out of our scope so I apologize if we can’t get it exactly as you may want or need it. We hope you understand.

Having said that we’d like to point you out in the right direction and you can take it from there at your own risk and responsibility. If you are not too comfortable doing anything beyond what I will share, then it may be best to consider hiring a Developer.

If you do know what you are doing, here what you can do:

Since 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.

Once you have that set up, first ensure your Logo is set to “Stacked” instead of “Inline”. Appearance > Customize > Header > Logo and Navigation > Layout > Stacked

Next Find the “_brand.php” file on the main X theme.

/wp-content/themes/x/framework/views/global/_brand.php

Copy this file and Paste it in the exact path in the child theme.

/wp-content/themes/x-child-integrity-light/framework/views/global/_brand.php

note: the above path will depend on the stack you are using. The “x-child-integrity-light” will have to correspond with the child theme you have chosen.

x-child-integrity-light
x-child-integrity-dark
x-child-renew
x-child-icon
x-child-ethos

After the _brand.php file is within your child theme, please replace the code with the following.

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>
<section class="header-contact">
	<ul>
		<li>
			<a href="tel:+1-555-555-1212">
				<i class="x-icon x-icon-phone"></i>
				+1-555-555-1212
			</a>
		</li>
		<li>
			<a href="mailto:email@yoursite.com">
				<i class="x-icon x-icon-envelope"></i>
				email@yoursite.com
			</a>
		</li>
	</ul>
</section>

Note: Don’t forget to change the anchor href phone and email to whatever you want.

Lastly You need to add this under Custom > CSS in the Customizer.

.x-logobar-inner {
    height: 70px;
}

a.x-brand.text {
    float: left;
}

section.header-contact {
    float: right;
}

section.header-contact ul {
    list-style:none;
}

section.header-contact ul li {
  float:left;
  padding: 0 20px;
  font-size: 25px;
}

section.header-contact ul li:last-child {
  padding-right: 0;
}

section.header-contact ul li a i.x-icon {
  color: #333333;
}

section.header-contact ul li a i.x-icon:hover {
  color: #999999;
}

section.header-contact ul li a:hover {
  color: #333333;
}

Note: Feel free to edit the styling as you see fit. This should get you a pretty good start. Hope this helps, Thanks!

Sure, add these css 🙂

@media ( min-width: 980px ) {
.x-brand.img {
float: left;
margin-top: -6px;
}
section.header-contact {
float: right;
margin-top: 12px;
}
}
@media ( max-width: 979px ) {
section.header-contact {
float: none;
}
.x-logobar-inner {
height: 150px;
}
section.header-contact ul li {
float: none;
display: inline-block;
}
}

Hope this helps 🙂

CENTRALocPOOLS.com

@media (max-width: 979px){
.x-logobar-inner {
  height: auto;
  padding-bottom: 0;
}
}

Screenshot: http://i.imgur.com/xqHUjo7.png.
Hope it helps.