Mobile Menu không nằm sẵn trên trang mà chỉ trượt ra khi khách bấm vào nút mở. Nếu bạn bấm nút ☰ mà không thấy gì, nguyên nhân thường là nút đó chưa được nối với menu.
button.menu-toggleĐịa chỉ (selector) của nó phải khớp với ô trong PublishKiểm tra nhanh trước khi sửa
- Bạn đã bật app embed của Navi+ trong theme. Nếu chưa, xem Bật app embed Navi+ trong theme.
- Mobile Menu đã được bật: bạn bấm Turn on trong cửa sổ Publish và Status đang là ON.
- Bạn đang mở thử trên điện thoại thật hoặc đã thu nhỏ cửa sổ trình duyệt, vì một số theme chỉ hiện nút ☰ trên màn hình nhỏ.
1. Chưa chọn cách mở menu
Bấm Turn on mới chỉ đưa menu lên trang web. Bạn cần chọn thêm ít nhất một nút để khách bấm vào mở menu, ngay bên dưới phần đầu của cửa sổ Publish.
-
Mở Mobile Menu trong Navi+, bấm Publish rồi tìm phần chọn cách mở ở bước 3.
PublishMethod 1: Open the menu from a menu spotNo code needed — Navi+ already found your theme’s menu icon and logo.STATUS:OFFTurn onSTEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.STEP 2Where can shoppers open this menu? Pick one or more.Use your existing menu iconTapping your theme’s ≡ button opens this Navi+ menu instead of the theme drawer.Add a ≡ icon next to your logoNavi+ places a small ≡ icon beside your logo — for desktop, or when the theme has no menu button.Floating buttonAn independent ≡ button floating on your site — tap or click it to open.Somewhere elseTap any element you choose, or insert a ≡ icon before/after it (CSS Selector). For developers too.STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open Test -
Chọn một trong các cách mở: dùng nút ☰ có sẵn của theme với Use your existing menu icon, thêm nút mới cạnh logo với Add a ≡ icon next to your logo, hoặc tạo nút nổi với Floating button. Xong bấm Save ở góc trên.
Bạn có thể bật nhiều cách mở cùng lúc. Khách bấm vào nút nào đã bật cũng đều mở được menu.
2. Nhập sai địa chỉ nút ☰
CSS selector là địa chỉ giúp Navi+ nhận diện đúng nút ☰ trên trang của bạn. Nếu địa chỉ này bị lệch, bạn bấm nút ☰ sẽ không có gì xảy ra.
Hai lỗi thường gặp nhất:
- Tự gõ tay bị nhầm ký tự: Trong thẻ Use your existing menu icon, Navi+ đã tự nhận diện theme và gợi ý sẵn địa chỉ. Bạn hãy chọn luôn gợi ý đó thay vì gõ tay. Với nhiều theme miễn phí của Shopify như Dawn, Sense, Savor hay Horizon, địa chỉ nút ☰ là
#Details-menu-drawer-container. - Chỉ mới cài cho một thiết bị: Nút ☰ trên điện thoại thường khác nút trên máy tính, hoặc giao diện máy tính không có nút ☰ nào. Khi mở phần nâng cao Somewhere else, bạn sẽ thấy hai tab riêng là Mobile setup và Desktop setup. Cách mở cài ở tab này không tự áp dụng sang tab kia.
Nếu chưa biết địa chỉ nút ☰ của theme, bạn hãy mở Navi+ Live trên cửa hàng thật rồi bấm thẳng vào nút ☰ để Navi+ đọc địa chỉ giúp bạn.
Nếu bạn thấy menu mở được trên điện thoại nhưng không mở trên máy tính, thường là chưa đặt cách mở ở tab Desktop setup. Trên máy tính thường không có nút ☰, nên cần thêm một nút: dùng Add a ≡ icon next to your logo hoặc một mục "Menu" trong Desktop Mega Menu.
3. Bấm nút ☰ vẫn ra menu cũ của theme
Khi bạn bấm nút ☰ mà menu cũ của theme trượt ra chứ không phải menu Navi+, nghĩa là theme vẫn đang tự xử lý cú bấm đó.
- Hãy chọn thẻ Use your existing menu icon và điền đúng địa chỉ nút ☰ của theme. Navi+ sẽ nhận cú bấm này và chặn drawer cũ của theme mở ra.
- Đừng ẩn nút ☰ của theme đi để thay bằng nút khác, dùng lại chính nút có sẵn của theme sẽ ổn định hơn.
- Nếu bấm một lần mà cả hai menu cùng hiện ra, bạn xem cách sửa tại bài Menu hiện hai lần hoặc menu theme vẫn còn.
Nếu trước đó bạn đã bấm Turn on cho menu mà vừa đổi hoặc cập nhật theme, địa chỉ cũ có thể không còn khớp với theme mới. Bạn xem thêm tại bài Menu biến mất sau khi đổi hoặc cập nhật theme.
4. Mục menu trên Tab Bar hoặc Floating Button chưa gắn link mở
Nhiều chủ shop đặt mục đầu tiên trên Tab Bar là ☰ Menu hoặc dùng Floating Button để mở Mobile Menu. Mục menu này không tự biết phải mở menu nào nên bạn cần gắn link cho nó.
-
Mở Mobile Menu, bấm Publish và tìm dòng Also opens from any other Navi+ menu item. Sao chép đoạn link có dạng
open:NaviMenu(SF-…)ở dòng này. -
Mở Tab Bar hoặc Floating Button, bấm vào mục Menu để mở bảng sửa rồi dán đoạn link vừa chép vào ô Link.
‹ BackEdit itemORUpload small image (as icon)jpg, png, svg, webp…Basic infoTextLanguage MenuLink to Auto-clean URLLanguage open:NaviMenu(SF-…)Add dividerAdd badgeSub text (optional)Language E.g. Free shipping over $50LayoutDisplay layoutAUTOICON + TEXTTEXT ▸IMAGETEXT ONLYWidth layoutAutomaticStyleFollows the menu's styleCustomizeVisibilityShowing under all conditionsEdit rulesSubmenuAdvanced -
Bấm Save ở góc trên, sau đó ra cửa hàng bấm thử lại mục menu đó.
Mã SF-… là mã riêng của từng Mobile Menu. Nếu bạn nhân bản hoặc tạo lại Mobile Menu, mã này sẽ đổi khác và mục menu cũ không còn mở được nữa. Khi đó bạn chỉ cần chép mã mới dán lại vào ô Link.
Vẫn chưa mở được menu?
Bạn thử kiểm tra lần lượt các bước sau:
- Mở Navi+ Live trên cửa hàng, bấm vào nút ☰ và so sánh địa chỉ Navi+ đọc được với địa chỉ đang điền trong mục Publish.
- Kiểm tra phần quy tắc hiển thị xem trang bạn đang mở có bị chặn hiện menu không.
- Tạm tắt các app menu khác rồi tải lại trang. Hai app cùng giành một nút ☰ sẽ làm cú bấm không hoạt động.
- Nếu vẫn chưa khắc phục được, bạn gửi địa chỉ cửa hàng và tên theme cho chúng tôi qua bài Cách liên hệ hỗ trợ.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Wix không có app block Menu in Section, Navi+ chỉ đặt bằng CSS selector. Không có thẻ gợi ý theo theme: bạn tự nhập địa chỉ nút ☰ của trang Wix (tìm bằng Navi+ Live) vào ô CSS selector. Nút nổi và mục của menu Navi+ khác làm giống Shopify.
WordPress và website khác không có app block Menu in Section, Navi+ chỉ đặt bằng CSS selector. Không có thẻ gợi ý theo theme: bạn tự nhập địa chỉ nút ☰ của website (tìm bằng Navi+ Live) vào ô CSS selector. Nút nổi và mục của menu Navi+ khác làm giống Shopify.