Code thanh liên hệ PC – Mobile đơn giản

Chia sẻ html, CSS thanh liên hệ như hình dưới đây:

HTML:

<div class="nav-social PC d-md-block d-none">
    <ul>
                    <li><a href="tel:0988123126" target=""><img src="https://zulihome.vn/wp-content/uploads/2022/12/Call.png"><br>Tổng đài</a></li>
                    <li><a href="https://www.facebook.com/messages/t/dongnaminfotech" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/messenger-2.png"><br>Messenger</a></li>
                    <li><a href="https://zalo.me/2024508797424936513" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/Zalo.png"><br>Zalo</a></li>
                <li class="register">
            <a href="#lepopup-Form-dk-1" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/envelope.svg"><br>Đăng ký</a>
        </li>
        <li class="to-top-pc">
            <a href="#" id="back-top" rel="nofollow" style="display: none;"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br>Back top</a>
        </li>
    </ul>
</div>

<!-- mobile-->
<div class="bottom-contact-mobile mobile d-md-none">
    <ul>
                    <li><a href="tel:0814621462">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-phone-mobile.png"><br>
            <span>Gọi điện </span></a></li>
                    <li><a href="sms:0925045760">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-sms-mobile.png"><br>
            <span>Nhắn tin</span></a></li>
                    <li><a href="https://zalo.me/2024508797424936513">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-zalo-mobile.png"><br>
            <span>Chat zalo</span></a></li>
                    <li><a href="https://m.me/zulihome.com.vn">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-mesenger-mobile.png"><br>
            <span>Messenger</span></a></li>
                <li class="to-top-pc">
            <a href="#" id="back-to-top" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br><span>Back top</span></a>
        </li>
    </ul>
</div>

CSS:

.d-md-none {
    display: none;
}
.nav-social {
    position: fixed;
    right: 5px;
    background: #fff;
    border-radius: 5px;
    width: auto;
    z-index: 150;
    top: 220px;
    padding: 10px 0;
    border: 1px solid #f2f2f2;
}
.nav-social ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
    .nav-social ul li {
            border-bottom: 1px solid #d6d6d6;
            padding-bottom: calc( .6em - 5px );
            margin-bottom: .6em;
            list-style: none;
            text-align: center; }
            .nav-social ul li:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: 0;
            }
.nav-social ul li img {
                max-width: 25px;
                max-height: 20px;
                object-position: center;
                object-fit: contain;
            }
.nav-social ul li a {
                padding: 5px 12px 5px 12px;
                display: block;
                text-align: center;
                font-size: 11px;
                line-height: 15px;
                color: #000;
                font-weight: 400;
                max-width: 80px;
                max-height: 60px;
                text-decoration: none; }
.nav-social ul li img {
                    margin-bottom: 10px;
                }

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.PC {
display: none;
}
.bottom-contact-mobile {
    display: block;
    position: fixed;
    bottom: 0;
    background: white;
    width: 100%;
    z-index: 99;
    box-shadow: 2px 1px 9px #dedede;
    border-top: 1px solid #eaeaea;}
.bottom-contact-mobile ul {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0; }
.bottom-contact-mobile ul li {
            width: 20%;
            flex-basis: 20%;
            list-style: none;
            text-align: center;
            font-size: 13.5px; }
.bottom-contact-mobile ul li img {
                width: 25px;
                height: 20px;
                object-position: center;
                object-fit: contain;
                margin-top: 10px;
                margin-bottom: 3px;
            }
.bottom-contact-mobile ul li span {
                color: #000;
                font-size: 12px;
            }
}

Lưu ý: Đổi thông tin liên hệ, image icon trước khi up web để sử dụng.