Docs

[appliedimage]

Hi

If you have a left aligned logo using the renew stack, what code should i be using to add text to the right of the logo; as the top bar sits above the logo?

Cheers

[Thai]

Hi There,

#1 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 ( 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; ?>
  <span class="x-text-logo">Big Enough To Succeed...<br>...Small Enough To Care</span>
</a>

#2 Try adding following CSS under Customize > Custom > CSS:

.x-text-logo {
    float: left;
    margin-top: 8px;
    line-height: 40px;
}
.x-brand img {
float: left;
}

Hope it helps 🙂

[appliedimage]

Thats great thanks, how do i centre the text?

Cheers

[Thai]

Hi There,

Please update the previous CSS a bit:

.masthead-stacked .x-brand {
    width: 100%;
}
.x-text-logo {
    float: left;
    margin-top: 8px;
    line-height: 40px;
    text-align: center;
    width: 74%;
}
.x-brand img {
    float: left;
}

Hope it helps 🙂

[Author]

Posts