Create a multi-item float menu to help customers easily choose how to contact, view offers, news or feedback,… quickly.
[Tutorials] Create a beautiful vertical float menu for Flatsome
Copy and paste the following code into Footer Scripts! (Flatsome > Advanced > Global settings > Footer Scripts)
<style>
.menu-float-right {
width: 100px;
position: fixed;
top: 104px;
right: 0;
z-index: 99999;
}
.menu-float-right #group {
position: absolute;
right: 0px;
}
.menu-float-right ul {
padding: 0;
}
.menu-float-right #group ul{background-color:rgba(0,0,0,0.3);}
.menu-float-right #group ul li {
position: relative;
list-style: none;
margin-bottom: 0;
width: 70px;
height: 65px;
text-align: center;
padding: 10px;
}
.menu-float-right #group ul li:hover{background-color:rgba(255,255,255,0.3);}
.menu-float-right #group ul li:nth-child(1n+1){
border-top:1px solid #ddd;
}
.menu-float-right #group ul li img {
border-radius: 5px;
width: 30px;
}
.menu-float-right #group ul li .mo-ta {
font-size: 12px;
text-align: center;
color: rgb(255, 255, 255);
position: absolute;
width: 90%;
left: 5%;
bottom: 5%;
margin-bottom: 0px;
}
.menu-float-right #group ul li a{display:block;width:100%;height:100%;}
</style>
<div class="menu-float-right">
<div id="group">
<ul>
<li class="ho-tro">
<a href="tel:0394321444" target="blank"><img src="https://banhangdemo.tk/wp-content/uploads/2021/09/technical-support.png" >
<p class="mo-ta">Hổ Trợ</p>
</a>
</li>
<li class="vi-ber">
<a href="#" target="blank"><img src="https://banhangdemo.tk/wp-content/uploads/2021/09/viber.png" >
<p class="mo-ta">Viber</p></a>
</li>
<li class="za-lo">
<a href="#"><img src="https://banhangdemo.tk/wp-content/uploads/2021/09/zalo.png" >
<p class="mo-ta">Zalo</p></a>
</li>
<li class="lien-he">
<a href="tel:0394321444" target="blank"><img src="https://banhangdemo.tk/wp-content/uploads/2021/09/phone.png">
<p class="mo-ta">Liên hệ</p></a>
</li>
<li class="lien-he">
<a href="tel:0394321444" target="blank"><img src="https://banhangdemo.tk/wp-content/uploads/2021/09/laptop.png">
<p class="mo-ta">Hỗ trợ xa</p></a>
</li>
<li class="lien-he">
<a href="#" target="blank"><img src="https://banhangdemo.tk/wp-content/uploads/2021/09/feedback.png">
<p class="mo-ta">Khiếu nai</p></a>
</li>
<li id="back_to_top" >
<a href="#"><img src="https://banhangdemo.tk/wp-content/uploads/2021/09/bell.png" >
<p class="mo-ta">Thông báo</p></a>
</li>
</ul>
</div>
</div>
Edit your phone number or custom link in the “#” place, then save it.