Đầu tiên bạn chèn vào trước thẻ <head> nội dung sau:
[php]
<style> | |
.phone-mobile {display: none;} | |
.daloctai-nav { | |
position: fixed; | |
right: 13px; | |
background: #fff; | |
border-radius: 5px; | |
width: auto; | |
z-index: 150; | |
bottom: 350px; | |
padding: 10px 0; | |
border: 1px solid #f2f2f2; | |
} | |
.daloctai-nav ul {list-style: none;padding: 0;margin: 0;} | |
.daloctai-nav ul li {list-style: none!important;} | |
.daloctai-nav ul>li a { | |
border:none; | |
padding: 3px; | |
display: block; | |
border-radius: 5px; | |
text-align: center; | |
font-size: 10px; | |
line-height: 15px; | |
color: #515151; | |
font-weight: 700; | |
max-width: 72.19px; | |
max-height: 54px; | |
text-decoration: none; | |
} | |
.daloctai-nav ul>li .chat_animation{display:none} | |
.daloctai-nav ul>li a i.ticon-heart { | |
background: url(https://thanhlapcongtygiarehcm.com/icon-map.png) no-repeat; | |
background-size: contain; | |
width: 36px; | |
height: 36px; | |
display: block; | |
} | |
.daloctai-nav ul>li a i.ticon-zalo-circle2 { | |
background: url(https://thanhlapcongtygiarehcm.com/icon-zalo.png) no-repeat; | |
background-size: contain; | |
width: 36px; | |
height: 36px; | |
display: block; | |
}.daloctai-nav li .button { | |
background: transparent; | |
}.daloctai-nav ul>li a i.ticon-angle-up { | |
background: url(https://thanhlapcongtygiarehcm.com/icon-angle-up.png) no-repeat; | |
background-size: contain; | |
width: 36px; | |
height: 36px; | |
display: block; | |
}.daloctai-nav ul>li a i { | |
width: 33px; | |
height: 33px; | |
display: block; | |
margin: auto; | |
}.daloctai-nav ul li .button .btn_phone_txt { | |
position: relative; top:35px; | |
font-size: 10px; | |
font-weight: bold; | |
text-transform: none; | |
} | |
.daloctai-nav ul>li a i.ticon-messenger { | |
background: url(https://thanhlapcongtygiarehcm.com/icon-messenger.png) no-repeat; | |
background-size: contain; | |
width: 36px; | |
height: 36px; | |
display: block; | |
}.daloctai-nav ul li .button .phone_animation i { | |
display: inline-block; | |
width: 55px; | |
font-size: 26px; | |
} | |
.daloctai-nav ul>li a i.ticon-chat-sms { | |
background: url(https://thanhlapcongtygiarehcm.com/icon-sms-1.jpg) no-repeat; | |
background-size: contain; | |
width: 38px; | |
height: 36px; | |
display: block; | |
} | |
.daloctai-nav ul>li a i.icon-phone-w { | |
background: url(https://thanhlapcongtygiarehcm.com/p2.gif) no-repeat; | |
background-size: contain; | |
width: 55px; | |
height: 55px;} | |
.daloctai-nav ul li .button .btn_phone_txt { | |
position: relative; | |
} | |
@media only screen and (max-width: 600px){ | |
.daloctai-nav li .chat_animation{display:block !Important} | |
.daloctai-nav li .button .phone_animation {box-shadow: none; | |
position: absolute; | |
top: -16px; | |
left: 50%; | |
transform: translate(-50%,0); | |
} | |
.daloctai-nav ul>li a{padding:0; margin:0 auto} | |
.daloctai-nav { | |
background: white; | |
width: 100%; border-radius:0; | |
color: #fff; | |
height: 60px; | |
line-height: 50px; | |
position: fixed; | |
bottom: 0; | |
left: 0; | |
z-index: 999; | |
padding: 5px; | |
margin: 0; | |
box-shadow: 0 4px 10px 0 #000; | |
} | |
.daloctai-nav li { | |
float: left; | |
width: 20%; | |
list-style: none; | |
height: 50px; | |
} | |
.phone-mobile{display:block !important}} | |
</style> |
[/php]