Docs

[Paul]

Hi, my client wants to create a the header of his site to look like this:
http://www.mahmayiofficefurniture.com/
ie logo to the left and a active phone number and email address to the right as the example.
I presume this would take some custom css. Can you please supply the code please
Thanks 🙂

[John Ezra]

Hi Paul,

Thanks for writing in. You didn’t provide us with your URL, so the guide I going to give you wont be as tailored. Next this will require not only CSS but also some changes in structure. Custom Development is out of our scope so I apologize if we can’t get it exactly as you may want or need it. We hope you understand.

Having said that we’d like to point you out in the right direction and you can take it from there at your own risk and responsibility. If you are not too comfortable doing anything beyond what I will share, then it may be best to consider hiring a Developer.

If you do know what you are doing, here what you can do:

Since 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.

Once you have that set up, first ensure your Logo is set to “Stacked” instead of “Inline”. Appearance > Customize > Header > Logo and Navigation > Layout > Stacked

Next Find the “_brand.php” file on the main X theme.

/wp-content/themes/x/framework/views/global/_brand.php

Copy this file and Paste it in the exact path in the child theme.

/wp-content/themes/x-child-integrity-light/framework/views/global/_brand.php

note: the above path will depend on the stack you are using. The “x-child-integrity-light” will have to correspond with the child theme you have chosen.

x-child-integrity-light
x-child-integrity-dark
x-child-renew
x-child-icon
x-child-ethos

After the _brand.php file is within your child theme, please replace the code with the 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>' : ''; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>
<section class="header-contact">
	<ul>
		<li>
			<a href="tel:+1-555-555-1212">
				<i class="x-icon x-icon-phone"></i>
				+1-555-555-1212
			</a>
		</li>
		<li>
			<a href="mailto:[email protected]">
				<i class="x-icon x-icon-envelope"></i>
				[email protected]
			</a>
		</li>
	</ul>
</section>

Note: Don’t forget to change the anchor href phone and email to whatever you want.

Lastly You need to add this under Custom > CSS in the Customizer.

.x-logobar-inner {
    height: 70px;
}

a.x-brand.text {
    float: left;
}

section.header-contact {
    float: right;
}

section.header-contact ul {
    list-style:none;
}

section.header-contact ul li {
  float:left;
  padding: 0 20px;
  font-size: 25px;
}

section.header-contact ul li:last-child {
  padding-right: 0;
}

section.header-contact ul li a i.x-icon {
  color: #333333;
}

section.header-contact ul li a i.x-icon:hover {
  color: #999999;
}

section.header-contact ul li a:hover {
  color: #333333;
}

Note: Feel free to edit the styling as you see fit. This should get you a pretty good start. Hope this helps, Thanks!

[Paul]

Thats Great, Thanks and great explanation, brill 🙂
Just a couple of tweaks
Can the logo be forced to be at the far left and the phone number and email to the right. So that the white space in-between is variable?
Can the email & tel number be centred (equal space top and bottom)
And when the width of the window is reduced can the elements be stacked and centered?
Hope that makes sense?
Here is how it looks at the moment:
http://www.mahmayiofficefurniture.ae/
Thanks 🙂

[Rad]

Hi Paul,

Sure, add these css 🙂

@media ( min-width: 980px ) {
.x-brand.img {
float: left;
margin-top: -6px;
}
section.header-contact {
float: right;
margin-top: 12px;
}
}
@media ( max-width: 979px ) {
section.header-contact {
float: none;
}
.x-logobar-inner {
height: 150px;
}
section.header-contact ul li {
float: none;
display: inline-block;
}
}

Hope this helps 🙂

[cooperg21]

Hello, thank you for helping. I just noticed that the email gets cut off on mobile phones in portrait mode. Is there a way to get the header to automatically scale to the right size? I’m looking to do something very similar.

CENTRALocPOOLS.com

[Thai]

Hi There,
Try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 979px){
.x-logobar-inner {
  height: auto;
  padding-bottom: 0;
}
}

Screenshot: http://i.imgur.com/xqHUjo7.png.
Hope it helps.

[Author]

Posts