Docs

[TPL99]

Hi,
I would like to place some text and a phone number on the right side of my header bar that is separate from my current logo which is on the left side. Is this possible in the new X theme? How do I do it?

[TPL99]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! Since you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file to place some text and a phone number on the right side of your header.

// Add phone and text next to the logo
// =============================================================================
function add_logo_text_number(){ ?>
  
  <div class="custom-text right pas">
    <span class="phone-number">#0987654321</span><br>
    <span class="address">Your adress here</span>
  </div>

<?php }
add_action('x_after_view_global__brand', 'add_logo_text_number');
// =============================================================================

And after adding this code you might need to change your logo and navbar position. You need to go to the customizer, Appearance > Customize > Header > Logo and Navigation and set it as “stacked” so that the logo, custom content and the navbar in place. By default, the logo will display at the center. To align it to the left, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .masthead-stacked .x-brand {
    float: left;
  }
}

Hope this helps. Please let us know how it goes.

[TPL99]

Hey, that all worked very well!!

However, how can I make the phone number bigger, and how can I make the phone number and the text below it right align?

thanks

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.custom-text.right.pas {
    text-align: right;
}
span.phone-number {
    font-size: 18px;
}

Hope it helps.

[TPL99]

Hi,

I put two lines of text in here rather than a phone number. However, they don’t line up completely on the right. How do I fix that. Also, how do I move them up and down to center them in the logo box?

Also, could I make them a clickable link? or an image with clickable link instead?

thanks

[Rue Nel]

Hello There,

I have checked your site and I am seeing this: http://prntscr.com/bijvi0
If you want to move the text a little more to the line, please find and update this code in your customizer, Appearance > Customize > Custom > CSS

@media (min-width: 980px){
  .custom-text.right.pas {
    text-align: right;
    padding-right: 0 !important;
  }
}

Hope this helps.

[TPL99]

Do I need to delete any of my current code first or just add this in? I tried adding it in and didn’t see a change.

[Rupok]

Hi there,

You don’t need to remove other code but make sure they are closed properly. If you have any unclosed CSS before this then it might not generate properly.

Thanks!

[TPL99]

hey, I have the code between lines 135 and 146 in my global CSS. I tried to find something else causing the problem, but couldn’t find it?…

[Rue Nel]

This reply has been marked as private.

[TPL99]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. I have made the reply private.

Cheers!

[TPL99]

Hi,
Could you tell me what code to add to make the text referenced above (in the header) white? I want to make the header bar a darker color so I need the text to be white. Also, is it possible to make part of this text a phone number that is clickable? thanks.

[TPL99]

also, I would like to make part of the text have a smaller font size than the other part.

[Author]

Posts