[nigelaberyParticipant]

Hi, I want to add a clickable button so that mobile users click to call and the number gets dialed by the phone. I know how to do clickable text phone numbers but want to make a button that can do it instead. I tried using the “prompt” short code in the backend with no success. Any help would be great! Thanks!

[nigelaberyParticipant]

This reply has been marked as private.

[CousettMember]

Hey there!

Try using the button shortcode, something along the lines of
[button href="tel:0481 368 884"]Call us![/button]

[nigelaberyParticipant]

G’day Support, hey there also 🙂

I tried putting that into the text field or button href but with no joy, was that what you meant or is there a specific field to put it in?

Cheers!

[DarshanaModerator]

Hi there,

You can place it into the text area of the contact page. Please try adding the following code then.

[button class="my-right-buttons" href="tel:0481 368 884" title="Call us!" shape="square" size="mini" icon_only="true"] Call us! [/button]

Hope that helps.

[paigerhyanParticipant]

Hi there,

i also want to include this type of button on my site. I want to place it under the menu in the navigation bar too, following the same styling as the site. I would also like the telephone number to be displayed about the button. It needs to be directly inline with the linked pages.

Please can you help with the coding for this? Ill send the site address shortly:

[paigerhyanParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Upon checking your site, it is under construction. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[paigerhyanParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Copy _navbar.php from framework/views/global and put it in the same path inside child theme, now replace existing code withe 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">
        <?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">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <?php echo do_shortcode('[button class="my-right-buttons" href="tel:0481 368 884" title="Call us!" shape="square" size="mini" icon_only="true"] Call us! [/button]'); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

For background images try to use images with maximum width of 1600px.

Hope it helps.

[paigerhyanParticipant]

Sorry I’m confused with the first part of your instruction, where do i locate copy_navbar.php?

[ChristopherModerator]

Hi there,

Please connect to FTP account and locate _navbar.php under framework/views/global, copy this file and put it in same path inside child theme which is x-child/framework/views/global, then replace existing code with the one I provided you with in previous replay.

Thanks.

[paigerhyanParticipant]

Hi there, it worked but the button is on one side, how do i centre it under the nag?

[ChristopherModerator]

Hi there,

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

a.x-btn.my-right-buttons.x-btn-square.x-btn-mini.x-btn-icon-only {
    margin: 6px auto;
    display: table;
}

Hope it helps.

[paigerhyanParticipant]

Yes, perfect thank you

[Author]

Posts