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.
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.
Hello there,
To accomplish it, try doing the below steps:
;(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);
Regards,
Kharis
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?
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
Kharis Thank you so much!
I really appreciate your help.
It works perfectly!
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