Custom Header Template for X Theme

x-custom-header-navbar.php

<?php

// =============================================================================
// Outputs the child theme navbar.
//
// Step 1: Replicate _navbar.php to your child theme
// Notes:
// a) Path must match the path in parent theme: framework/views/global/_navbar.php
// b) Set logo and navigation layout to 'Stacked' in Appearance > Customizer > Header
// c) Wrap logo and content area in separate containers, to facilitate styling.
// d) Adjust as necessary for your own project. :)
//
// =============================================================================

$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">
        <!-- LOGO WRAPPER -->
        <div class="your-logo">
          <?php x_get_view( 'global', '_brand' ); ?>
        </div>
        <!-- END LOGO WRAPPER -->
        <!-- CONTENT AREA WRAPPER -->
        <div class="your-header-content">
        	<!-- Put whatever content you want here. I've used the site description as an example. -->
		<?php  bloginfo( 'description' ); ?>
        </div>
        <!-- END CONTENT AREA WRAPPER -->
      </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_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

x-custom-header-style.css

/* Step 2: Style the custom header in your child theme's stylesheet
 * Notes:
 * a) The code below will float the logo left, content area right.
 * b) Responsive layout kicks in at 700px - logo and content stacked and aligned center.
 * c) Adjust as necessary for your own project. :)
 */

/* float logo left, header content right & set vertical alignment to middle for both */
.x-logobar {
	text-align: left;
}
.your-logo,
.your-header-content {
	display: inline-block;
	vertical-align: middle;
	width: 49%;
}
.your-header-content {
	text-align: right;
	width: 50.25%;
}

@media all and (max-width: 700px) {
	/* stack & center the logo & header content */
	.x-logobar {
		text-align: center;
	}
	.your-logo,
	.your-header-content {
		width: 100%;
		text-align: center;
	}
}