Header Links

Hey guys,

I’m using X 5.0,1, trying to add a link to an email address and phone to the header, to the left of the main menu (where the logo would normally be). I’m re-creating the header seen below:

What’s the most efficient way to add those links with a corresponding icon to the left area of the header?

Best,
Andrew

Hi Andrew,

The most efficient way is to modify one of the theme’s view file.

To do that create file _brand.php in /wp-content/themes/x-child/framework/legacy/cranium/headers/views/global
and copy the code below into that file.

<?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>

<span class="my-phone"><a href="tel:123-456-7890"><?php echo do_shortcode('[x_icon type="phone"]');?> 123-456-7890</a></span>
<span class="my-email"><a href="mailto:email@email.com"><?php echo do_shortcode('[x_icon type="envelope"]');?> email@email.com</a></span>

Please change the number and email in the code provided.

For more information regarding overriding the theme views, kindly refer to the link below

Hope that helps.

Thank you for this info Paul, and for the best practices link! I didn’t have a:

/wp-content/themes/x-child/framework/legacy/cranium/headers/views/global

directory (no legacy, cranium, or headers subdirectories), but I put the _brand.php file into:

wp-content/themes/x-child/framework/views/global

and the phone/email showed up in the header! Perfect. One question:

How can I target the items in CSS to change the color to white and move it down in the header?

I see each has a span class (.my-phone and .my-email), but can’t manage to target them correctly.

Best,
Andrew

Hi Andrew,

Take a few minutes and watch this series, it will take your skills to the next level :slight_smile:

Hope it helps!

Hey Joao!

Thank you for the link to the CSS video series - i’ve been meaning to improve my skill with CSS for some time, but i’ve got way too much on my plate at this moment to train myself for a single fix. Next month perhaps.

If you (or anyone available) could let me know how to effectively target and style just the email/phone links in this support thread, i’d really appreciate it.

Best,
Andrew

Hi there,

Since <a> is a direct child, then you can target it something like this

/* Link and Text */
.my-phone a {

}
.my-email a {

}

/* Icon */
.my-phone a i, .my-phone a i:before{

}
.my-email a i, .my-email a i:before{

}

And sometimes you need to use !important if there is another CSS overriding your custom CSS. Example, color: #000 !important;.

Hope this helps :slight_smile:

Thanks Iam!

I was able to target .my-phone and .my-email this way, but for some reason the email isn’t showing up as a link on desktop. When i’m in the custom CSS area of the customizer editing CSS, the viewport shows the links working, but they aren’t working when loading up the actual site.

Also, I was able to change the color to white as intended, but any attempt to re-position the phone/email seems to have no effect (I tried margin, padding, and position properties with no luck).

Any idea how I could change the positioning?

Hi,

It’s being covered by your topbar.

To fix it, you can add this in Custom CSS

.my-phone,
.my-email  {
    float:left;
}

.x-topbar-inner {
    position:relative;
}

.x-topbar .x-social-global {
   margin-top: 50px;
    position: absolute;
}

Hope that helps.