Open effect pro header

[Borislav_VD]

Could be possible to achieve a similar effect like that one , where the button expands after clicking into the header area ? thanks ( PRO theme )

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

a.expand-link {
    border: 2px solid #b3acac;
    padding: 5px;
    color: #b3acac;
    width: 30px;
    display: block;
    overflow: hidden;
    height: 30px;
    transition: width linear 0.5s;
}

a.expand-link.expanded.phone {
    width: 130px;
}

a.expand-link.expanded.email {
    width: 130px;
}

After that adding this custom JS under Theme Options > JS:

jQuery("document").ready(function($){
	$('a.expand-link').on('click touchend', function(event) {
		event.preventDefault();
		$(this).toggleClass('expanded');
	});
});

Then add the following HTML to the text element:

<a href="#" class="expand-link phone"><i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i> +84988222666</a>

<a href="#" class="expand-link email"><i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i> [email protected]</a>

Hope it helps