Docs

[adsmith86]

Hi, I am trying to add a phone number to the top right of my navbar in the ethos stack. Please advise on the best way to do so.

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[adsmith86]

http://www.oxforddentalidahofalls.com

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-nav').append('<li id="menu-item-3478" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3478"><a href="tel:555-5555">555-5555</a></li>');
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[adsmith86]

Hi, I am sorry, I should have been more specific. I would like it to be in the navigation bar, but not actually part of the menu because the menu collapses on mobile and I would like the phone number to still be visible in mobile. Can you help me with that?

[Christopher]

Hi there,

Copy _nav-primary.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>
 
<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>

<span class="phone">123456</span>
<?php endif; ?>

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

.phone{
display:inline-block;
float:right;
}

Hope it helps.

[adsmith86]

That got the phone number on the left side of the navbar as you will see on my site. Is there a way for me to make it clickable and have it show up on the right side of the page?

[Rupok]

Hi there,

Thanks for writing back. I can’t see them on your site. Did you remove them?

Let us know and make sure to keep to code on your site so that we can check.

[adsmith86]

Sorry, that should be there. I hadn’t saved the changes yet.

[Rupok]

Hi there,

Thanks for updating.

Let’s update this :

<span class="phone">123456</span>

to this :

<p class="phone"><a href="tel:123456">123456</a></p>

And then remove the CSS above and add this instead :

.phone {
  position: absolute;
  right: -75px;
  top: 14px;
}

.phone > a {
  color: #02aed6;
}

.phone > a:hover {
  color: #fff;
}

Hope this helps.

Cheers!

[Author]

Posts