เลือกใช้ 2 แบบ คือ
1. มีเมนู 2 อัน อันนึงแสดงแบบเต็มตลอด กับ อีกอันแสดงแบบย่อ แล้วใช้ class ของ bootstap ใน joomla เป็นตัวคุมการแสดงผล
กำหนดให้ เมนูแบบเต็ม จะแสดงจนกว่าขนาดหน้าจอจะเล็กเท่ากับมือถือ
2. ปรับ css เอง โดยปกติ bootstap ใน joomla เมนูจะย่อก็ต่อเมื่อหน้าจอขนาดน้อยกว่า 768px
เราต้องใช้เครื่องมือตรวจสอบหน้าเว็บไซต์ของ Browser เพื่อปรับแก้ css เอง
โค้ด: เลือกทั้งหมด
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }