How to fill the empty space on the left and right side of the logo?

[troy19]

My website is based on the Icon Stack with the logo horizontally centered.

Now I’d like to fill the empty space on the left and right side of the logo.

On the left side there should be a claim (text) and on the right side there should be the icons for social media.

How can this be realized? Didn’t find any option …

By now the claim and the icons are in the top bar, but I prefer to skip the top bar as it needs to much vertical space. I’d rather bring the claim and the icons inline with the logo.

Thanks - Frank.

[mldarshana]

Hi Frank,

Thanks for writing in! This could be possible with some custom development, however it would be outside the scope of the support we can provide.

To get an idea on how you can achieve this, follow this guidelines below.

First you will need to setup a child theme by following this guide (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57). Then you need to copy the file _brand.php located under (x/framework/legacy/cranium/headers/views/global/) into your child theme’s respective location (x-child/framework/legacy/cranium/headers/views/global/_brand.php).

Then you can edit the file using a text editor and add your content. For example check the following divs that I have added.
<div class="my-header-left">This is logo left content!</div>
<div class="my-header-right">This is for social media</div>

Once you integrate your code it will look like this:

<?php

// =============================================================================
// x/framework/legacy/cranium/headers/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>'; ?>
<div class="my-header-left">This is logo left content!</div>
<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="my-header-right">This is for social media</div>

Then you also need to add the following CSS rules int yout Theme Options > Global CSS area.

my-header-left{
float:left;
}
.my-header-right {
float:right;
}

Thanks!

[troy19]

That was quick. Thanks.

Maybe I consider myself brave enough to do this custom coding

Will let you know …

[jade]

Feel free to let us know how it goes.

[troy19]

Was easier than I thought thanks to the perfect description.

Only the claim isn’t at the left side but on top of the logo.

And the social media on the right side is vertically aligned to the top, but I’d prefer it to be vertically centered to the logo.

Do you have any idea?

[thai]

Hi There,

Please update the previous CSS to this:

.my-header-left{
    float:left;
    line-height: 90px;
    font-size: 14px;
}
.my-header-right {
    float:right;
    line-height: 90px;
    font-size: 14px;
}

Hope it helps

[troy19]

Thanks for the update, but it was my bad: I forgot the “.” of “.my-header-left”, so the code was corrupt

After the correction it looks fine. Except the logo being not perfect horizontally centered. Maybe that’s because the left text is longer than the right one and pushes the logo to the right side?

Is there a solution?

[nabeel]

Hi again,

Try adding the following code in the Theme Options > CSS:

.masthead-stacked .x-brand {
    position: absolute;
    left: calc(50% - 70px);
}

Hope this helps!

[troy19]

Great! Many thanks. Looks good.

Just on mobile view - and maybe on some tablets as well - the left text and the Logo is layered, whereas the right text is located fine (underneath the logo).

Do you have any idea how to avoid this layering?

Thanks - Frank.

[christian]

Hey Frank,

We’d love to help further but this would require further custom development and it is outside the scope of our support. X header was not designed to accommodate extra elements in the header so we often receive header related customization questions or requests and this was the reason why a header and footer builder was created and an advanced X version was formed now called Pro. Please consider upgrading to Pro so you can build a custom header yourself without custom coding. In case you upgrade to Pro and you get stuck with the options, we’re here to assist all the way.

Thank you for understanding.