Adding a clickable button to the header contact info section

Hi there,

Is there any way I can add a clickable button to the header contact info section of this theme? I’d like to add a ‘Make an Appointment’ button.

The site is http://www.samboprinting.com. I am wanting to add a button to the contact info in the red strip at the top of the home page. Is this possible?

Thanks.

Hello Paul,

You can try to do this with jQuery.

  1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to your DashboardSettingsInsert Headers and Footers → add the following code to Scripts in Header section, and click Save button.

<script>
    jQuery(document).ready(function(){
        jQuery('.header-contact .container').append(jQuery('<a href="http://example.com/" class="roll-button" style="background-color: #492994;">Make an Appointment</a>'));
    });
</script>

Just replace http://example.com/ in the code above with your own button link.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

That’s great, thank you.

How do I make the font of the button bold and change the colour of the font to white?

and increase the size of the text in the button?

Hello Paul,

It looks like the color is already white.

Please try to add this CSS code in order to increase the font size and make it bold:

.header-contact .roll-button {
    font-size: 22px;
    font-weight: bold;
}

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

Kind Regards, Roman.