Add the Header button below the contact icons in mobile menu

How Can I add my Get Estimate Header button below the phone number icon in the mobile menu of airi?

http://demos.tenayadigital.com/SYN/

That is the example. You’ve got the Get Estimate underneath the hamburger menu but I would prefer it upfront beneath the phone number. Any help?

Thanks,

Jack

Hi Jack,

Thank you for reaching out to us.

The theme currently doesn’t have such that option. We can add some extra jQuery code to get the same result. I would suggest you the code. But I need time to get it right from the beginning.

Please wait while I am working on this and I will be back to you as soon as possible.

Regards,
Kharis
aThemes Support

Thank you! Let me know!

Hello there,

Thank you for waiting. I really appreciate your patience.

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. Let me know how it goes.

Regards,
Kharis
aThemes Support

Thank you!! Thats awesome!!

1 Like

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
aThemes Support