X Theme: header - logo left, another img right, stack on mobile

[Caracarina]

Hello there,

I am brand new to X and Apex - hello and apologies if this is a duplicate - i have searched but was not sure that the answers i found were exactly what i needed. Still learning this new platform.

So: i have a header, i want the logo to be aligned left, and the company’s claim to aligned right in the header. On mobile, they should stack. I’ve tried the header widgets but they seem to be doing something different entirely.

Please could you help with getting this right for my client? Thank you kindly and best regards,
Carin

[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/legacy/cranium/headers/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="company-claim">Your text will go here!</div>

After that adding this custom CSS under style.css file locates in your child theme:

.x-brand {
    float: left;
}

.company-claim {
    float: right;
}

@media (max-width: 979px){
    .x-brand,
    .company-claim {
        width: 100%;
    }

    .company-claim {
        margin-top: 25px;
    }
}

Hope it helps

[Caracarina]

Hello there,

Thank you for the comprehensive and illuminating reply!
I’ve followed all your directions and it is working very well - thank you. It is my first time working with a child theme and i was a bit scared, but the step by step directions made the process easy to follow

Thank you again and best regards,
Carin

[jade]

You’re most welcome, Carin.