Call to Action Button in Menu

Sydney
#1

Im trying to add a Call to Action Button (BOOK NOW) to my menu bar, next to my contact phone number.

Is there some CSS or JS code i can use to add this?

alexfisherhealth.com.au

Thanks.

#2

Hello there,

To accomplish it, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

       'use strict'

       if( $('.phone-menu').length ) {
        var phone = $('.phone-menu').html();
        var bookButton = ' <a class="roll-button button-slider" href="#">Book Now</a>';
        $('.site-header .col-md-8').prepend('<div class="call-us">'+phone+bookButton+'</div>');
      }

    })(jQuery);
  1. Update

Regards,
Kharis

1 Like
#3

Thanks so much! You are a champion.

How can i make it so the button displays under the phone number on mobile view?
can i change the button colour/ text colour / hover colour?

Book%20Now%20Button
Book Now Button.png389×611 47.8 KB

#4

Hello there,

Wrap your button with a SPAN tag. So the code will look like this:

    ;(function($) {

       'use strict'

       if( $('.phone-menu').length ) {
        var phone = $('.phone-menu').html();
        var bookButton = ' <span><a class="roll-button button-slider" href="#">Book Now</a></span>';
        $('.site-header .col-md-8').prepend('<div class="call-us">'+phone+bookButton+'</div>');
      }

    })(jQuery);

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .call-us span {
        display: block;
      }
    }

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .call-us a.roll-button {
      background-color: #57d6c1;
      border-color: #57d6c1;
      color: #fff;
    }

    .call-us a.roll-button:hover {
      background-color: #ff0000;
      border-color: #ff0000;
      color: #fff000;
    }

Regards,
Kharis

#5

Kharis Thank you so much!
I really appreciate your help.

It works perfectly!

#6

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis