Trong bước Configure, bạn sẽ thấy hai thẻ Display on mobile và Display on desktop. Đây là nơi bạn chọn cho menu hiện trên điện thoại, trên máy tính, hay cả hai.
Navi+ tính màn hình rộng từ 768 px trở xuống là điện thoại, từ 769 px trở lên là máy tính. Khi bạn tắt thiết bị nào, khách vào cửa hàng bằng thiết bị đó sẽ không thấy menu nữa. Riêng khung xem trước trong app vẫn luôn hiện menu để bạn tiện chỉnh sửa.
Bật tắt menu trên điện thoại và máy tính
Mỗi thẻ có một công tắc bật tắt nằm ngay trên đầu.
Show menu on mobile
Gạt bật để hiện menu trên điện thoại, gạt tắt để ẩn đi.
- Khi bạn mới tạo menu, công tắc này bật sẵn ở Tab Bar, Icon Menu, Mobile Mega Menu và Floating Button, nhưng tắt ở Desktop Mega Menu.
- Desktop Mega Menu không có công tắc này vì đây là menu dành riêng cho máy tính. Nếu muốn có menu tương ứng trên điện thoại, bạn mở thẻ Smart responsive theo hướng dẫn trong bài Tạo Desktop Mega Menu.
- Mobile Menu cũng không có công tắc này. Mobile Menu chỉ mở ra khi khách bấm vào nút bạn đã gắn trên web, không phụ thuộc công tắc thiết bị.
Khi bạn tắt Show menu on mobile, các mục chỉnh riêng cho điện thoại bên dưới như vị trí, hiệu ứng cuộn và cuộn ngang sẽ tự thu gọn lại. Những gì bạn đã chọn trước đó vẫn được giữ nguyên, không bị mất. Riêng mục Touch highlight vẫn hiện vì máy tính bảng dùng màn hình cảm ứng vẫn cần đến nó.
Show menu on desktop
Gạt bật để hiện menu trên máy tính, gạt tắt để ẩn đi.
- Khi bạn mới tạo menu, công tắc này tắt ở Tab Bar, Icon Menu và Mobile Mega Menu, nhưng bật sẵn ở Floating Button và Desktop Mega Menu.
- Ở Mobile Mega Menu, công tắc này bị làm mờ và khoá lại, không bấm được. Trên thẻ hiện chữ (Not supported) vì loại menu này chỉ dùng cho điện thoại.
- Mobile Menu không có công tắc này.
- Khi bạn tắt Show menu on desktop, các mục chỉnh riêng cho máy tính trong cùng thẻ cũng tự thu gọn lại.
Menu tạo từ mẫu có sẵn có thể mang giá trị khác mặc định ở trên. Hãy mở bước Configure và xem lại hai công tắc này trước khi đưa menu lên cửa hàng.
Chọn vị trí hiện menu
Với Tab Bar, ngay dưới công tắc sẽ có thêm ô Position. Với Floating Button, bạn sẽ thấy hai ô Position on mobile và Position on desktop. Bạn xem cách chọn chi tiết trong bài Vị trí và khoảng cách lề của menu.
Chỉnh số mục Icon Menu trên một hàng máy tính
Khi làm Icon Menu, bạn sẽ thấy thêm ô Desktop/mobile display ratio nằm trong thẻ Display on desktop. Ô này chỉ hiện ra khi công tắc Show menu on desktop đang bật.
Bạn có thể chọn các mức: 1x, 1.5x, 2x, 2.5x, 3x, 4x, 5x. Mặc định là 1x.
Nếu bạn cho Icon Menu hiện trên cả điện thoại lẫn máy tính, màn hình máy tính rộng hơn nên thường cần xếp nhiều mục trên một hàng hơn. Ô này sẽ nhân số mục menu trên một hàng ở máy tính theo tỉ lệ bạn chọn. Ví dụ điện thoại đang hiện 5 mục một hàng, bạn chọn 2x thì trên máy tính sẽ hiện 10 mục một hàng.
Tỉ lệ này chỉ áp dụng cho các mục menu chia độ rộng theo ô lưới như 2/10. Những mục đang bật Auto width sẽ giữ nguyên kích thước, không đổi theo tỉ lệ này.
Desktop/mobile display ratio
Ô này nằm trong bước Configure, thẻ Display on desktop, thành một khung nhỏ cùng tên. Nó cho Icon Menu xếp nhiều ô hơn trên máy tính so với điện thoại.
- Lựa chọn:
1x,1.5x,2x,2.5x,3x,4x,5x, chọn bằng nút tròn. - Mặc định:
1x(bằng điện thoại). Menu tạo từ mẫu có sẵn có thể mang tỉ lệ khác. - Áp cho: chỉ Icon Menu, với mục chia độ rộng theo ô lưới; mục bật Auto width giữ nguyên. Không có ở các loại menu khác. Không cần gói riêng.
- Chỉ hiện khi: công tắc Show menu on desktop đang bật.
- Đổi ô này thì khách thấy gì: chỉ trên màn hình máy tính, số ô trên một hàng nhân lên theo tỉ lệ, mỗi ô thu hẹp tương ứng; điện thoại không đổi. Ví dụ điện thoại 5 ô một hàng, chọn
2xthì máy tính 10 ô một hàng.
Smart responsive
Thẻ này nằm trong bước Configure của Desktop Mega Menu, ở chỗ các menu khác có công tắc Show menu on mobile. Đây là hướng dẫn chứ không phải ô cài đặt: tự nó không đổi gì trên cửa hàng cho tới khi bạn làm theo.
- Trong thẻ có gì: khi menu chưa được nhúng, thẻ hiện 3 bước: Copy embed item (sao chép mục trỏ tới mega menu này), chọn Mobile Menu để dán vào cấp 1 (hoặc bấm Create a Mobile menu nếu chưa có), rồi tuỳ chọn ẩn bớt mục khỏi bản điện thoại bằng ô Exclude when embedded trong phần Visibility của mục. Khi đã nhúng, thẻ báo This menu already shows on mobile và liệt kê các Mobile Menu đang dùng nó.
- Áp cho: chỉ Desktop Mega Menu. Không cần gói riêng.
- Đổi ô này thì khách thấy gì: không có ô để đổi. Sau khi bạn dán mục nhúng vào Mobile Menu, khách trên điện thoại thấy nội dung mega menu trong Mobile Menu đó và bạn chỉ sửa nội dung ở một chỗ. Mục bật Exclude when embedded biến khỏi bản điện thoại nhưng vẫn ở máy tính.
Bảng tra nhanh
| Ô cài đặt trong app | Tác dụng | Mặc định khi tạo mới | Loại menu có ô này |
|---|---|---|---|
| Show menu on mobile | Hiện hoặc ẩn menu trên điện thoại, màn hình từ 768 px trở xuống | Bật sẵn; riêng Desktop Mega Menu là tắt | Tab Bar, Floating Button, Icon Menu, Mobile Mega Menu |
| Show menu on desktop | Hiện hoặc ẩn menu trên máy tính, màn hình từ 769 px trở lên | Tắt; riêng Floating Button và Desktop Mega Menu là bật sẵn | Tab Bar, Floating Button, Icon Menu, Desktop Mega Menu. Ở Mobile Mega Menu thì bị khoá |
| Desktop/mobile display ratio | Nhân số mục menu trên một hàng khi xem bằng máy tính | 1x |
Icon Menu |
Hai công tắc này hoạt động giống hệt nhau dù bạn dùng Navi+ trên Shopify, Wix hay bất kỳ website nào khác.