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

[PVS]

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?

​

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:

/* [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]

sao mình thêm đoạn này mà load xuống nó k hiện nhỉ

 

[donquaca]

cảm ơn nhé