Tạo thanh Float menu bám sát lề cho website

  1. Đối với theme Flatsome
    Tại thanh Admin Bar đen đen trên cùng, truy cập chữ Flatsome – Advanced – Global Setting – Footer Script.
    Chèn code tại đó
  2. Đối với theme bất kỳ không phải Flatsome
    Truy cập Giao diện – Sửa – chọn theme đang dùng để sửa – Footer.php
    Chèn code tại đó
    Dưới đây là bộ code:

    <style>
    .box_fixRight {
    position: fixed;
    top: 150px;
    right: -140px;
    width: auto;
    transition: all 0.2s ease-in-out 0s;
    z-index: 999;
    }
    .box_fixRight .box_content {
    background: #fff;
    padding: 10px;
    box-shadow: 10px 0px 30px #888888;
    border-radius: 10px 0 0 10px;
    }
    .box_fixRight .box_content .item {
    display: block;
    padding: 13px 10px 13px 47px;
    color: #111;
    }
    .box_fixRight .box_content .item:hover{color:#184b9b}
    .box_fixRight .box_content .item.item_1 {
    background: url(/wp-content/uploads/2019/03/iconfix-1.png) no-repeat left;
    }
    .box_fixRight .box_content .item.item_2 {
    background: url(/wp-content/uploads/2019/03/iconfix-2.png) no-repeat left;
    }
    .box_fixRight .box_content .item.item_3 {
    background: url(/wp-content/uploads/2019/03/iconfix-3.png) no-repeat left;
    }
    .box_fixRight:hover {
    right: 0;
    transition: all 0.2s ease-in-out 0s;
    }
    @media (max-width: 549px){
    .box_fixRight{display:none}
    }
    </style>
    <div class=”box_fixRight”>
    <div class=”box_content”>
    <a href=”/khoa-hoc/” class=”item item_1″>Lịch khai giảng</a>
    <a href=”/lien-he/” class=”item item_2″>Liên hệ</a>
    <a href=”#dang-ky” class=”item item_3″>Đăng ký học thử</a>
    </div>
    </div>

Hãy lưu lại và kiểm tra kết quả nhé

Thả vào đây ý kiến của bạn:

avatar