Docs

[lakong]

We’re developing a legal site using the integrity stack:

http://relaw.wpengine.com

This development site is pw protected, but we’re happy to share it for this support forum:

un/pw: demo / ernenwein

For now the logo is stacked on its own line, but we would like the logo to left aligned with the first Home option of the navbar and then to right align (same line as logo) an area to promote visitors to call a phone number for a consultation. Similar to these:

https://www.losangelescriminallawyer.pro/

Home

Home

Any help would be appreciated.

– LA

[Thai]

Hi There,

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.
Then navigate to your child theme’s /framework/views/global directory create a file named _brand.php and paste the code below:

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

<div class="cta-container">
	<span class="line1">Free Consultation</span> 
	<span class="phone1"><a href="tel:18883346344">(888) 334-6344</a></span> 
	<span class="phone2"><a href="tel:13234646453">(323) 464-6453</a></span> 
	<span class="line2">24 Hour Assistance</span> 
</div>

After that add the following CSS under style.css locates in your child theme:

.masthead-stacked .x-brand {
    float: left;
}

.cta-container {
    float: right;
}
.cta-container > span {
    display: block;
}

Hope it helps 🙂

[lakong]

Thanks!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts