Khi cửa hàng hiện hai menu cùng lúc, nguyên nhân là menu gốc của theme chưa tắt và vẫn chạy song song với menu Navi+. Bạn xem cửa hàng đang gặp trường hợp nào dưới đây để sửa đúng chỗ.
Trước khi bắt đầu
- Trong Navi+, mở menu đang bị lặp rồi bấm Publish.
- Kiểm tra xem menu bị lặp trên máy tính, trên điện thoại hay cả hai. Mỗi trường hợp dưới đây thường xảy ra trên một thiết bị khác nhau.
Nguyên nhân 1: Chọn chèn thêm thay vì thay thế
Hai tuỳ chọn Insert after và Insert before sẽ giữ nguyên menu của theme và đặt menu Navi+ nằm cạnh đó. Muốn ẩn menu cũ đi, bạn cần chọn Replace.
-
Mở menu trong Navi+, bấm Publish rồi tìm đến bước chọn vị trí đặt menu.
PublishMethod 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn 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 2Choose a menu placementWhere this Mega Menu shows up on your store.Replace your main menuYour desktop navigation is swapped for this Mega Menu. Logo, search and cart stay.Add below your headerA full-width bar inserted right under the header. Your navigation stays.Somewhere elseBefore, after or in place of any element you choose (CSS Selector).Placement found by Navi+header navSTEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
Chọn Replace, sau đó chọn dòng main menu trong bảng Navigation selector map. Đừng chọn cả vùng header vì sẽ làm mất luôn logo và giỏ hàng — xem thêm tại Menu hiện sai chỗ hoặc làm vỡ header.
-
Bấm Save rồi tải lại trang cửa hàng để kiểm tra.
Nguyên nhân 2: Theme tách riêng menu máy tính và điện thoại
Nhiều theme tạo hai thanh menu riêng biệt: một thanh trên header máy tính và một thanh nằm trong drawer điện thoại. Khi bạn chỉ thay một chỗ, menu ở chỗ kia vẫn còn.
Dấu hiệu nhận biết: trên máy tính chỉ còn một menu đúng ý, nhưng mở trên điện thoại vẫn thấy menu cũ của theme — hoặc ngược lại.
Để thay cả hai, bạn điền cả hai địa chỉ CSS selector của từng vùng menu vào ô vị trí đặt, ngăn cách bằng dấu phẩy và thêm ký hiệu thiết bị ở cuối:
.header__inline-menu(D), .menu-drawer__navigation(M)
Trong đó, (D) là chỉ áp dụng cho máy tính, (M) là chỉ áp dụng cho điện thoại, còn nếu bỏ trống thì áp dụng cho cả hai. Hai dòng trên chỉ là ví dụ vì mỗi theme đặt tên một kiểu. Để lấy đúng địa chỉ menu còn sót trên cửa hàng, bạn mở trang bằng Navi+ Live rồi bấm thẳng vào menu muốn bỏ.
Nguyên nhân 3: Bấm nút ☰ mở ra cả hai drawer
Dấu hiệu nhận biết: khi bấm nút ☰ trên điện thoại, cả drawer của theme lẫn drawer của Navi+ cùng trượt ra đè lên nhau.
Lý do là nút ☰ trên header vẫn đang gọi menu cũ của theme, trong khi bạn lại tạo thêm một nút mở riêng của Navi+. Bạn không cần ẩn nút ☰ của theme đi, chỉ cần giao nút đó cho Navi+ điều khiển:
-
Mở Mobile Menu trong Navi+, bấm Publish rồi chọn thẻ Use your existing menu icon.
-
Điền địa chỉ nút ☰ của theme vào ô — thường Navi+ đã gợi ý sẵn cho bạn. Bấm Save.
Từ lúc này, khi khách bấm nút ☰ thì chỉ có Mobile Menu của Navi+ mở ra, còn drawer của theme sẽ không mở nữa. Bạn có thể xem chi tiết tại bài Đưa Mobile Menu lên cửa hàng và chọn cách mở.
Cách cuối: Ẩn menu thừa bằng CSS
Nếu không thể chọn đúng menu của theme ở bước đặt vị trí — chẳng hạn do theme tự sinh thêm một bản sao menu khác — bạn có thể ẩn hẳn phần thừa đó bằng CSS riêng của menu. Xem hướng dẫn đầy đủ tại Ẩn menu có sẵn của theme.
Trong menu đang sửa, bạn mở thẻ Configure, kéo xuống mục Custom CSS for this menu rồi dán đoạn mã sau:
/*
* Ẩn thanh điều hướng của theme trên máy tính.
* Lý do: Navi+ đã thay menu chính, nhưng theme này vẽ thêm
* một bản sao mà chỗ đặt không phủ tới.
*/
@media (min-width: 990px) {
.header__inline-menu { display: none; }
}
Bạn chỉ nên viết gọn cho một địa chỉ và một mốc độ rộng màn hình như trên. Nhớ đổi .header__inline-menu thành địa chỉ thật trên theme của bạn.
Đoạn CSS này lưu bên trong Navi+. Khi bạn gỡ Navi+, đoạn CSS cũng tự gỡ theo và menu gốc của theme sẽ hiện lại bình thường.
Không xoá phần điều hướng khỏi mã theme. Thay đổi đó còn lại sau khi gỡ Navi+ và có thể khiến cửa hàng không còn menu nào.
Đã thử hết mà vẫn còn hai menu?
Có thể cửa hàng đang bật một app tạo menu khác cùng lúc. Khi hai app cùng chèn vào một vị trí trên header, menu sẽ bị lặp làm đôi. Bạn thử tắt app kia đi, tải lại trang cửa hàng xem đã hết lặp chưa.
Nếu vẫn chưa xử lý được, bạn gửi địa chỉ cửa hàng kèm tên theme cho chúng tô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. Hai menu thường do bạn chọn Insert after hoặc Insert before thay vì Replace. Dùng Navi+ Live để lấy địa chỉ menu cũ của Wix rồi Replace.
WordPress và website khác không có app block Menu in Section, Navi+ chỉ đặt bằng CSS selector. Theme WordPress hay vẽ menu hai lần (một cho máy tính, một cho điện thoại): dùng cách ở nguyên nhân 2 với hậu tố (D) và (M). Không có bảng gợi ý theo theme, bạn lấy địa chỉ bằng Navi+ Live.