Tutorial 2x Mobile logo header - Logo header trên di động XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,698
Mobile logo header - Logo header trên di động XenForo 2

Bạn muốn có một header trên di động với logo như thế này?

cxf_mobile_logo_demo.gif

Như bạn thấy, bạn có thể có một header trên di động, nhưng khi bạn cuộn logo sẽ hiển thị trong thanh navigation.

Để có được điều này, hãy thêm đoạn code sau đây vào template Extra.less:
Less:
/* [cXF] Mobile logo header */
@media (max-width: @xf-responsiveMedium) {
    .has-js .p-header {
        display: initial;
    }
    .p-header-logo {
        max-width: 100%;
        margin: 0 auto;
    }
    .p-header-logo.p-header-logo--image img {
        max-height: 80px;
    }
    .has-js .p-nav-smallLogo {
        width: 0;
        opacity: 0;
        transition: all .25s ease;
    }
    .p-navSticky.is-sticky .p-nav-smallLogo {
        width: 100%;
        opacity: 1;
        transition: all .25s ease;
    }
    /* to hide icons in header if you're using [cXF] Icons in Header add-on */
    .cxf_icons_header_container {
        display: none;
    }
}
/*****/

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

sanhpv1

Corporal
Tham gia
15/07/2020
Bài viết
105
Được Like
2
sao mình thêm đoạn này mà load xuống nó k hiện nhỉ
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom