Docs

[apadkins]

I like how the site I’m working on is taking shape. However, I tested placing our telephone number in the top nav as it was easy but do not like the look.

Is there a way to add our phone number to the right side of the main menu in the header (I don’t need it clickable, nor do I need the main menu to be centered – although that would be nice)? Also, what css would be needed to control the font-size and font-color to customize the phone number? Thanks!

[Matthew W]

Greetings apadkins, I too had the same need for a business website where this same feature was needed.

The only way to do this (to the best of my knowledge) was to create my own code in a child theme.

NOTE: These edits were made to the “navbar.php” file (not header.php) for placement.

<!-- MODIFIED CONTENT -->
	<div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
				<div class="x-column x-sm x-1-2">
					<div class="homelogo"><?php x_get_view( 'global', '_brand' ); ?></div>
				</div>
				<div class="x-column x-sm x-1-2 last">
					<h2 class="homecall"><span>Call:</span> (123) 456-7890 <br/ ><em>M-F 8:00am-8:00pm EST</em></h2>
				</div>
      </div>
    </div> <!-- end .x-logobar-inner -->
  </div> <!-- end .x-logobar -->
	<!-- #MODIFIED CONTENT -->

.homelogo and .homecall are custom to my child theme, but feel free to use them if you wish.

So far this has worked

[Christopher]

Hi there,

@mattdaddy71

Thanks for sharing.

@apadkins

I would suggest the same solution.
Because 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.

Copy _navbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with 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">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <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 class="my-class">Add your content here</div>
        </div>
      </div>
    </div>
  </div>

<?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 class="my-class">Add your content here</div>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Add this CSS as well :

.my-class{
color:red;
font-size:12px;
}

Hope it helps.

[Christopher]

Hi there,

@mattdaddy71

Thanks for sharing.

@apadkins

I would suggest the same solution.
Because 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.

Copy _navbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with 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">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <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 class="my-class">Add your content here</div>
        </div>
      </div>
    </div>
  </div>

<?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 class="my-class">Add your content here</div>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Add this CSS as well :

.my-class{
color:red;
font-size:12px;
}

Hope it helps.

[apadkins]

Thanks guys! Using Filezilla, I downloaded the parent file _navbar.php from framework/views/global to my local machine and used TextEdit to make the changes suggested by Christopher and then dragged it into the same path inside child theme (and added the CSS in custom css). The less than perfect result was that the the telephone number was placed to the right of the logo and slightly above (no worries about the size and color as I can tweak that later with the CSS provided).

I’ll need a bit more help as the original request was to have the telephone number on the right side of the menu, i.e., to the rightmost side of the navbar – with everything inline. What changes would I need to make? In a perfect world the menu would be centered between the logo (left) and phone number (right), but as long as it’s to the right edge of the navbar I guess I can live with the menu’s placement.

I’ll provide the link to my site; wp admin credentials; and ftp credentials separately in private mode.

Hope you can help, or … I’d be happy to take part in the beta testing of the new header builder since it’s around the corner …

[apadkins]

This reply has been marked as private.

[apadkins]

This reply has been marked as private.

[Rue Nel]

Hello There,

I have replaced the filename of your navbar.php. What I did is this, I added a custom function in your child theme’s functions.php file:

// Add a phone number to rght side of the menu
// =============================================================================
function add_phone_number(){ ?>
	<div class="my-class right mtm mlm">Call 415.357.1117</div>
<?php }
add_action('x_before_view_global__nav-primary', 'add_phone_number');
// =============================================================================

This should place the phone number at the right side. And then using the class, you should be able to style it and make it inline your menu. Perhaps with this code:

@media(min-width: 980px){
    .x-navbar .my-class {
    	padding-top: 20px;
    }
}

Please let us know if this works out for you.

[apadkins]

Two follow-up issues:

1) I don’t see that a child theme functions.php file was created. Where is it?

2) The custom padding addition to CSS worked great for desktop but not for the mobile view. In mobile, the telephone number is too high. Hoping for either control of the padding in mobile as well, or a general change that will make the telephone number vertically centered in the navbar (either would work).

Thanks.

[Rad]

Hi there,

1. You don’t have a child theme yet.

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.

2. In that case, let’s target both device 🙂

@media(min-width: 980px){ //Desktop
    .x-navbar .my-class {
    	padding-top: 20px;
    }
}
@media(min-width: 979px){ //Tablet/mobile
    .x-navbar .my-class {
    	padding-top: 0px;
        margin-top: -10px;
    }
}

Then change the value according to your preference.

Thanks!

[apadkins]

I am so confused at this point. I have/had a child-theme. I tweaked the _navbar.php as indicated in the earlier thread and placed it in my child theme, and then Rue Nel apparently tweaked the function.php and placed it in my child theme. Problem is, like you, I didn’t see the x-child on Filezilla right now. Also, under themes, the X-child existed but for some reason the x-theme was selected again and not the x-child. Nuts.

Using Filezilla ftp I’ve added back x-child from my local to the remote again, and I’ve selected/activated the x-child theme. The only thing that happened recently is that after working on the child-theme awhile, I realizing I wanted to import the demo content for Integrity1 which I knew would probably change my customizer settings which was okay. Moving forward …

Issue 1: Please let me know where the Rue Nel changes are, and can they be moved into my child-theme if not already there. It must exist somewhere because the phone number exists and is to the right side of the main menu.

Issue 2: The css code from Rad is not responding to changes. Example, I change the 20px for padding-top to 10 or 30, and nothing. Should work but not being reflected on screen.

Help.

[Rupok]

Hi there,

Thanks for writing back.

#1. Runel did on Child Theme’s functions.php file. As you somehow removed it and re-installed; you need to place the code again if it’s not there. Let’s check.

#2. Update the CSS code (just removing comment) :

@media(min-width: 980px){ 
    .x-navbar .my-class {
    	padding-top: 20px;
    }
}
@media(min-width: 979px){ 
    .x-navbar .my-class {
    	padding-top: 0px;
        margin-top: -10px;
    }
}

Hope this helps.

[apadkins]

Thanks, Rupok! The CSS for desktop worked great and after changing min-width to max-width for the mobile, the changes on mobile were reflected.

The remaining issue is that I still can’t find where the telephone number code is in the x-child. The phone number “Call 415.357.1117” appears to the right of my navbar as requested, but where is it? I ask because I want to have the ability to change it in the future, e.g., remove the dots or add an icon instead of “Call”.

As requested I modified the function.php file under my x-child to include Runel’s code. Two observations. First, before adding his code to the x-child function.php, “Call 415.357.1117” was already to the right of my menu without me knowing where it was coming from, and second, I removed the word “Call” in front of the number from the code in the x-child function.php I put in, but the site still shows “Call” in front of the number so I can only assume that the controlling code is not what I just added, but was there previously that I’m unable find.

Please move the controlling code to the child theme function.php so I can move on. I’m wasting too much time on a header phone number. Pretty please.

[Rue Nel]

Hello There,

You can always modify the functions.php file right in your dashboard. You may go to Appearance > Editor and select “functions.php file”. Please make sure that you do not insert any invalid code or character. Doing so could potentially throw in a fatal error which would lock you out of the dashboard.

You may have a caching issues after you have deleted the “Call” text. Since you are using SiteGround, could you please disable the supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

Hope this helps.

[apadkins]

Rue Nel, I learned something new about appearance > editor. Very nice, and great to know where the code is. Much appreciated!

Last tweak: I tried to remove “Call” from the function.php code in the editor and replace it with the shortcode for a mobile phone [x_icon type=”mobile”], but instead of showing an icon, it displayed the shortcode.

How do I add the shortcode to this function.php modification so that the icon appears? Thanks.

[Author]

Posts