กรุณาปิด โปรแกรมบล๊อกโฆษณา เพราะเราอยู่ได้ด้วยโฆษณาที่ท่านเห็น
Please close the adblock program. Because we can live with the ads you see


วิธีการทํา XF 2.X Mobile logo header

  • เริ่มกระทู้โดย เริ่มกระทู้โดย thxf.org
  • วันที่เริ่มกระทู้ วันที่เริ่มกระทู้
  • ตอบ ตอบ 0
  • อ่าน อ่าน 982

thxf.org

Staff Member
Adminstrator
Moderater
VIP Member
Registered
Would you like to have a mobile header with logo like this?

cxf_mobile_logo_demo-gif.gif



As you can see you can have a mobile header, but when you scroll the logo will show in the navigation.

To achieve this add code below to extra.less template:

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 {
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...
 



กรุณาปิด โปรแกรมบล๊อกโฆษณา เพราะเราอยู่ได้ด้วยโฆษณาที่ท่านเห็น
Please close the adblock program. Because we can live with the ads you see
ด้านบน ด้านล่าง