Tenaya Digital


Add the header contact button below the contact icons in the mobile display – Airi Pro


For the Airi Pro theme, we need to add some extra jQuery code to make this happen.

Try doing these 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($) {

	  if( $('.header-cta').length ) {
		if ( matchMedia( 'only screen and (max-width: 1199px)' ).matches ) {

		  var url = $('.header-cta a').attr('href');
		  $('.site-header .contact-area').append('<div class="header-quote-btn"><a href="'+url+'">Get Estimate</a></div>');


  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (max-width: 1199px) {
    	.header-quote-btn {
    		margin-top: 20px;
      .header-quote-btn a {
        background-color: #4c4c4c;
        color: #fff;
        padding: 12px 17px;
      	display: block;
      	text-align: center;

Flush any applied cache before running your test. Enjoy!

Recommended Reads