Docs

[bjmiller]

Think I know how to center the menu and have my logo left but how would I add a phone number to the right of the menu?

[bjmiller]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the customer:

.masthead-inline .desktop .x-nav {
    float: none;
    margin: 0px auto;
    width: 755px;
    height: 50px;
}

nav.x-nav-wrap.desktop:after {
    content: "TELEPHONE NUMBER HERE";
    position: absolute;
    top: 18px;
    right: 0;
}

Hope this helps.

[bjmiller]

That is awesome. Is there a way to make the phone number clickable and also show up in mobile?

[Nico]

Hi There,

Try adding this in your customizer’s custom CSS:

nav.x-nav-wrap.mobile:after{
content: "256-547-5466";
    position: absolute;
}

Let us know how it goes.

Thanks.

[bjmiller]

This reply has been marked as private.

[Joao]

Hi There,

Why not use the telephone number on the topbar instead?

You can create a telephone link on the topbar make it float right. You can format it with the size you want.

Also after that you can go to Appereance Customizer Header and align the navbar icons in order that it looks well spaced with the telephone above.

You can add something like this on Appereance Customizer Header Topbar Content:

<a class="tel" href="tel:+1800229933">+1800229933</a>

Than add this code to Appereance Customizer Custom CSS

.x-topbar .x-social-global {
  display: none;
}
.x-topbar .p-info {
  font-size: 25px;
  float: right;
}

This way your telephone will be always visible and clickable from mobile phones.

Let us know your thoughts.

Thanks

Joao

[bjmiller]

This reply has been marked as private.

[Jade]

Hi there,

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.

Once you got the theme installed and activated, login through FTP then open the directory /wp-content/themes/x-child/framework/views/global then create the file _navbar.php then add this code to the file:

<?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>
      </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">
          <div id="nav-tel">
              <a class="tel" href="tel:+1800229933">+1800229933</a>
          </div>        
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>         
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Then add this in the customizer:

#nav-tel {
    float: right;
    margin-top: 22px;
}

The please remove the customization suggested in the previous responses.

Hope this helps.

[bjmiller]

This reply has been marked as private.

[Friech]

Hi There,

Did you follow Jade’s suggestion, how did that turns out? You can improve that to this:

<?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">
        <div id="nav-tel" class="contact-number right"><a class="tel" href="tel:+1800229933">+1800229933</a></div>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </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' ); ?>
          <div id="nav-tel" class="contact-number right"><a class="tel" href="tel:+1800229933">+1800229933</a></div>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
           
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

And update the given custom CSS to this:

.contact-number {
	font-size: 1.4em;
	font-weight: bolder;
	padding-top: 22px;
	padding-left: 20px;
}
.contact-number .tel {color: white;}

Feel free to adjust the values.

And this CSS media query should bring your contact number above the menu when viewed on mobile.

@media (max-width:  979px) {
	.contact-number {
	float: none;
    text-align: right;
	}
}

Hope it helps, Cheers!

[bjmiller]

This reply has been marked as private.

[Joao]

Hi There,

Please add the folowing code to Appereance Customizer Custom CSS

@media (max-width: 500px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

Hope that helps

Joao

[bjmiller]

Is there any way for the logo to disappear and it just be the phone number and hamburger menu?

The logo takes up a lot of mobile space.

[bjmiller]

I got it. Thank you X themes for being top notch

[Author]

Posts