How to add sticky buttons in your website?

Hongo theme does not provide sticky buttons by default as they are not the part of theme. We use sticky buttons in Hongo theme for demo site purpose only which will help demo visitors in purchase or connect with us from any page of our demo site. To input sticky buttons into your site, please follow below steps.

Step 1: Add below custom css code in your customize panelby following this path. ( Appearance > Customize > Additional CSS )

/* For Two Button */
.buy-theme {
	transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-duration: .2s;
	-moz-transition-duration: .2s;
	-webkit-transition-duration: .2s;
	-o-transition-duration: .2s;
	position:fixed;
	top:150px;
	right: -69px;
	z-index: 10;
	background: #fff;
	-moz-box-shadow:0 0 10px rgba(0,0,0,0.2);
	-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);
	box-shadow:0 0 10px rgba(0,0,0,0.2);
}

.buy-theme i {
	font-size: 16px;
	vertical-align: middle;
	position: relative;
	top: -1px;
	color: #6f6f6f;
}

.all-demo i {
	font-size: 15px;
	vertical-align: middle;
	position: relative;
	top: -1px;
	color: #6f6f6f;
}

.buy-theme:hover,
.all-demo:hover {
	transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-duration: .2s;
	-moz-transition-duration: .2s;
	-webkit-transition-duration: .2s;
	-o-transition-duration: .2s;
	right: 0px;
	background: #f57250;
}

.buy-theme span,
.all-demo span {
	padding:0 9px;
	position: relative;
	top:0;
	opacity: 0;
}

.buy-theme:hover span,
.all-demo:hover span {
	opacity: 1;
	color: #fff;
}

.buy-theme:hover i,
.all-demo:hover i {
	color: #fff;
}

.buy-theme a,
.all-demo a {
	color: #232323;
	font-size: 10px;
	text-transform: uppercase;
	padding:2px 10px;
	display: block;
	text-decoration: none;
	font-weight: 500;
}

.all-demo {
	transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-duration: .2s;
	-moz-transition-duration: .2s;
	-webkit-transition-duration: .2s;
	-o-transition-duration: .2s;
	position:fixed;
	top:192px;
	right: -102px;
	z-index: 10;
	background: #fff;
	-moz-box-shadow:0 0 10px rgba(0,0,0,0.2);
	-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);
	box-shadow:0 0 10px rgba(0,0,0,0.2);
}

Step 2: Add below code in theme footer.php file before BODY end tag.

<div class="buy-theme alt-font sm-display-none">
	<a href="#" target="_blank">
		<i class="ti-shopping-cart"></i>
		<span>Buy Theme</span>
	</a>
</div>
<div class="all-demo alt-font sm-display-none">
	<a href="mailto:example.com?subject=Test Subject">
		<i class="ti-email"></i>
		<span>Quick Question?</span>
	</a>
</div>