Tenaya Digital

Code

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

Example:

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>');

		}
	  }

	})(jQuery);
  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