Via SCSS

If you're updating your CSS using SCSS the following files have changed.

/scss/sticky/_header-bar
/scss/components/_search
/scss/components/_cards
/scss/components/_inputs

Via CSS

In style.css, locate /*-Footer Menu-*/ using CTRL+F or CMD+F, right above this line add the following

.header-search {overflow: hidden;}
.header-search * {transition: transform 300ms ease;}
.header-search-active .header-icon, .header-search-active .header-title {transform: translateY(-80px);}
.header-search .search-box, .header-search input {transform: translateY(80px); border: 0px;}
.header-search-active .search-box, .header-search-active input {transform: translateY(0px);}
				

Now, locate /*Range Sliders*/ using CTRL+F or CMD+F and right above it add the following

.otp {
  width: 50px;
  height: 50px;
  border: solid 1px #cacaca;
}

.otp:focus, .otp:active {
  outline: solid 1px #000 !important;
}
				

New JavaScript

The code bellow will enable WebShare API, the Search Header and OTP page.
To add these go to custom.js and locate //Sharing using CTRL+F or CMD+F. Replace the entire share function with the code below

//Search Header
var searchHeader = document.querySelectorAll('[data-toggle-search]');
if(searchHeader){
	searchHeader.forEach(el => el.addEventListener('click', event => {
		window.scrollTo({ top: 0, behavior: `smooth` })
		document.querySelectorAll('.header')[0].classList.toggle('header-search-active');
	})
)};

//Sharing
var shareTitle = document.title;
var shareText = document.title;
var shareLink = window.location.href;
if(document.querySelectorAll('.shareToFacebook, .shareToTwitter, .shareToLinkedIn')[0]){
	document.querySelectorAll('.shareToFacebook, .shareToTwitter, .shareToLinkedIn, .shareToWhatsApp, .shareToMail').forEach(x => {x.setAttribute('target','_blank');});
	document.querySelectorAll('.shareToFacebook').forEach( x=> x.setAttribute("href", "https://www.facebook.com/sharer/sharer.php?u="+shareLink));
	document.querySelectorAll('.shareToTwitter').forEach( x=> x.setAttribute("href", "http://twitter.com/share?text="+shareTitle+"%20"+shareLink));
	document.querySelectorAll('.shareToPinterest').forEach( x=> x.setAttribute("href", "https://pinterest.com/pin/create/button/?url=" + shareLink));
	document.querySelectorAll('.shareToWhatsApp').forEach( x=> x.setAttribute("href", "whatsapp://send?text=" + shareLink));
	document.querySelectorAll('.shareToMail').forEach( x=> x.setAttribute("href", "mailto:?body=" + shareLink));
	document.querySelectorAll('.shareToLinkedIn').forEach( x=> x.setAttribute("href", "https://www.linkedin.com/shareArticle?mini=true&url="+shareLink+"&title="+shareTitle+"&summary=&source="));
}
//Menu Share Web API
if (navigator.canShare){
	const shareData = {title: shareTitle, text: shareText, url: shareLink}
	var shareMenu = document.querySelectorAll('[data-menu="menu-share"], [data-show-share]');
	if(shareMenu){shareMenu.forEach(el => {el.addEventListener('click', async () => {menu('menu-share', 'hide',0); try {await navigator.share(shareData)} catch(err){}});});}
}

//OTP Boxes
var otp = document.querySelectorAll('.otp');
if(otp[0]){
	otp.forEach(el => {
		el.addEventListener('focus', (e) => {el.value = "";})
		el.addEventListener('input', (e) => {el.nextElementSibling ? el.nextElementSibling.focus() : el.blur();});
	});
}
				

That's it!

Now you can use all the new features added in Sticky 4.8

Having issues updating?

If you're facing any issues updating to the new version of Sticky, please send us a message via our contact form (link). We'll gladly check your issue and help out in the shortest possible time ( usually less than 2 hours unless we're sleeping )

Best regards,
Enabled