[Tùy biến Flatsome] Chỉnh các Tab trên Flatsome thành dạng trượt ngang tối ưu cho Mobile dễ làm

Chào các bạn, hẳn nhiều bạn khi dùng theme flatsome thường sẽ rất khó chịu với element tabs của theme. Vì thế trong bài viết này, Liêm sẽ hướng dẫn các bạn chỉnh tab trên Flatsome thành dạng trượt ngang thay vì dạng truyền thống để Website dễ điều khiển và đẹp hơn.

Tabs Element trên Theme Flatsome là gì?

Tabs Element (tạm dịch là chức năng tab – chứ đúng nghĩa là thuộc tính tab) trên Flatsome là một chức năng trong UX Builder (của riêng Theme Flatsome) giúp các bạn có thể tạo được các tab (các nút tạo chuyển hướng trên 1 trang) cho trang Web.

Tại sao phải thay đổi Tabs Element của Flatsome?

Ở phiên bản mặc định của Tabs Element trên Flatsome, sẽ khá là xấu nếu mà nội dung tiêu đề Tabs quá nhiều, sẽ khiến các tab bị chèn xuống dưới, gây mất thiện cảm về nhìn của người sử dụng.

Thay đổi Tabs Element của Flatsome cho đẹp hơn nào

Đến bước này, dong dài cũng đã đủ, Liêm sẽ hướng dẫn các bạn cách code vài đoạn css vào website sử dụng Theme Flatsome giúp cho Tabs Element trở nên đẹp hơn, dễ tùy biến và điều hướng hơn cho những khách hàng truy cập vào trang Web.

.tabbed-content .tab {
    flex-shrink: 0 !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.tabbed-content .nav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-direction: unset;
    -webkit-flex-flow: unset;
    flex-flow: unset;
    -webkit-justify-content: unset;
    justify-content: unset;
    -webkit-align-items: unset;
    align-items: unset;
}

::-webkit-scrollbar {
    height: 3px;
    -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar-thumb {
    border: 4px solid #ba6900;
}

Sau khi chèn hoàn tất, các bạn sẽ được thành quả như video sau.

Hoặc xem demo trực tiếp tại website xaydungit.vn của Liêm đã code thêm chức năng tab dạng trượt cho flatsome bạn nhé.

Nếu các bạn thấy bài viết này hay, hãy chia sẻ bài viết này để nhiều người cùng biết, và theo dõi bạn nha.