Tab Bar - How to change active colour

Hi

How can the tab colour be changed so that when it is selected that it stays highlighted.

Pleas see link below;

http://www.hispec.net/hs_new/tankers-2/sa-s-tanker/

Also the tabs in the mobile site do not show the information contained when selected. How can this be fixed.

Kind Regards
Conor

Hi Conor,

Thanks for writing around!

  • To change the tab color, please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS
.vc_tta-tab.vc_active a {
    color: #fff !important;
}

.vc_tta-tab.vc_active {
    background: #f4524d !important;
    border-radius: 5px !important;
}
  • To fix the mobile tabs issue, add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript
jQuery( function($) {
	$('.vc_tta-tab a').on('click', function( e ){
		setTimeout( function() { 
			$('html, body').stop().stop();
		}, 100 );
	});
	$(document).ready(function() {
		$('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a').off('click touchstart touchend');
	});

});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

Nabeel, all working. Thank you very much, I’m now a happy camper :wink:

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.