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,618
Được Like
12,670
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ỉ
 

Top Bottom