Logo plus text in Header

Support
#1

Hi,
I Try to get a logo plus text in my header.
I read the Topic from alexandrtantsyrev but it doesn´t help me.
Would you help me?
In another Topic you say I should work with the Pro-Theme, but I bought the x-Theme because of cornerstone and wouldn`t like to change
Thanks a lot!
Susanne

#2

Hello @Kirchhofer,

Thanks for asking. :slight_smile:

You can have logo and text both at the same time. I suggest you to upload/select logo from X > Theme Options > Header > Logo Image. After that please add following CSS under X > Theme Options > CSS:

.visually-hidden {
    display: block;
    overflow: visible;
    position: relative;
    margin-left: 6%;
}

Regarding Pro Theme, we suggest Pro Theme is because it comes with Header, Footer and Content (Cornerstone) builder and all 3 work together to offer a complete page builder tools. Please note that Cornerstone is built into Pro Theme. Using Header and Footer builder you can design unique and global header and footers. It negates the use of custom CSS and almost every aspect of the website can be edited using page builder.

Hope that helps.

Thanks.

#3

Thanks a lot!
There is another Question:
how can I get the Text UNDER the logo? And am I able to format the text?

#4

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

#5

Sorry, my website is on localhost!

#6

Hello @Kirchhofer,

Thanks for updating the thread. :slight_smile:

Rather then making the changes using CSS which can be cumbersome to maintain, I suggest you to make few template changes. Please delete the CSS I gave you and use this method instead.

As this will require template change, I suggest you to install and setup Child Theme. I am sharing few resources that you can use to download and setup child theme.

https://theme.co/apex/child-themes

After that please copy _brand.php file from /wp-content/themes/x/framework/legacy/cranium/headers/views/global/ and paste under /wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/.

After that please replace the code with following.

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

<div class="title-container"><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="logo-title">Logo Title</div></div>

Replace the word Logo Title in above code with your own text.

After that please add following CSS under X > Theme Options > CSS:

.title-container {
    float: left;
    display: inline-block;
}

/* css to format text */

.logo-title {
    font-size: 18px;
    text-align: center;
    color: #000;
}

Let us know how it goes.

Thanks.

#7

Thanks so much for answering!
I worked with the child theme from beginning.
In wp-content my x-child has no legacy/cranium/headers/views/global/ - folder
in the framework - Folder there ist only a folder named “views” which is empty…
What can I do?

#8

Hello @Kirchhofer,

Thanks for updating the thread.

Ohh, look’s like I missed informing you about this. Sorry about that. You need to create the folder’s in the same order under child theme.

Thanks.

#9

GREAT!!! It works!
Thank you so much!!! :grinning:

#10

You are most welcome. :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.