Docs

[Anton Davis]

Hi,

Can you please tell me how to add a phone number and email address to right side of my header?

Similar to this site – http://eyewire.com.au/

I followed the instructions in this thread but it did nothing:

https://community.theme.co/forums/topic/how-to-add-text-element-to-header/

Thanks

[Joao]

Hi There,

You have your phone and email there, where you would like to place it?

Please provide a mockup

Thanks

Joao

[Anton Davis]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code in_navbar.php file to the following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
      <div class="x-column x-1-3 x-sm"> <?php x_get_view( 'global', '_brand' ); ?></div>
      <div class="x-column x-1-3 x-sm"><a href="tel:+1-800-555-5555">Call 1-800-555-5555</a><br><a href="mailto:[email protected]?Subject=Hello%20again" target="_top">Send Mail</a></div>
      <div class="x-column x-1-3 x-sm"><?php x_social_global(); ?></div>

      
      </div>
    </div> <!-- end .x-logobar-inner -->
  </div> <!-- end .x-logobar -->

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">

          <?php x_get_view( 'global', '_nav', 'primary' ); ?>

        </div>
      </div> <!-- end .x-navbar-inner -->
    </div> <!-- end .x-navbar -->
  </div> <!-- end .x-navbar-wrap -->

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">

          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div> <!-- end .x-navbar-inner -->
    </div> <!-- end .x-navbar -->
  </div> <!-- end .x-navbar-wrap -->

<?php endif; ?>

Hope it helps.

[Anton Davis]

Yes, this worked. Thank you.

But how do I position the phone number and email address to the far right of the navabr. Also how do I style the size and colour of them?

Thanks

[Christopher]

Hi there,

Please change columns width by updating following lines :

 <div class="x-column x-1-3 x-sm"> <?php x_get_view( 'global', '_brand' ); ?></div>
      <div class="x-column x-1-3 x-sm"><a href="tel:+1-800-555-5555">Call 1-800-555-5555</a><br><a href="mailto:[email protected]?Subject=Hello%20again" target="_top">Send Mail</a></div>
      <div class="x-column x-1-3 x-sm"><?php x_social_global(); ?></div>

To :

<div class="x-column x-1-2 x-sm"> <?php x_get_view( 'global', '_brand' ); ?></div>
<div class="x-column x-1-2 x-sm"><a class="logobar-link" href="tel:+1-800-555-5555">Call 1-800-555-5555</a><br><a class="logobar-link" href="mailto:[email protected]?Subject=Hello%20again" target="_top">Send Mail</a></div>

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

.logobar-link{
   color:red;
   float:right;
   font-size:12px;
}

Hope it helps.

[Anton Davis]

Thanks that’s much better.

I’ve separated the phone number and email address into different classes, so I can customise each one differently. But when I increase the size of the phone number it pushes the email address towards the middle of the header at certain resolutions. Anyway to fix this?

Also can you please tell me how to center align the phone number and email text so it aligns directly under the logo when scaled to mobile view? Instead of being pushed to the right.

Thank you

[Christopher]

Hi there,

Update your CSS code to:

.logobar-link2 {
    color: white;
    float: right;
    text-align: right;
    font-size: 16px;
    width: 100%;
}

Add this code as well :

@media (max-width:767px){
a.logobar-link, a.logobar-link2 {
    width: 100%;
    float: none;
    text-align: center;
    display: inline-block;
}
}

Hope it helps.

[Author]

Posts