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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,597
Được Like
8,138
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:
Mã:
/* [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 {
        opacity: 0;
        transition: all .25s ease;
    }
    .p-navSticky.is-sticky .p-nav-smallLogo {
        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​
 

Top Bottom