Bạn vừa bật menu Navi+ lên web nhưng menu cũ của theme vẫn nằm ngay bên cạnh. Đây không phải lỗi — chỉ là do cách đặt menu lúc bấm Publish. Bạn chỉ cần đổi lại một tuỳ chọn là xong.
Trước khi làm
- Bạn đang dùng loại menu gắn vào header như Desktop Mega Menu và đã đưa menu lên header.
- Bạn nhìn thấy menu cũ của theme đang hiện ở đâu trên trang.
Vì sao lại hiện cả hai menu?
Trong cửa sổ Publish, Navi+ có 3 kiểu đặt menu vào trang:
| Kiểu đặt | Kết quả trên trang |
|---|---|
| Replace | Ẩn chỗ bạn chọn, đặt menu Navi+ vào đúng vị trí đó |
| Insert after | Giữ nguyên chỗ cũ, đặt menu Navi+ ngay phía sau |
| Insert before | Giữ nguyên chỗ cũ, đặt menu Navi+ ngay phía trước |
Nếu trên web đang hiện cả hai menu, khả năng cao bạn đang để Insert after hoặc Insert before.
Đổi sang kiểu Replace để thay menu cũ
- Mở Apps > Navi+, bấm vào menu đang dùng rồi bấm bước Publish trên thanh bước bên trái.
-
Chọn kiểu đặt là Replace.
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 editorChọn Replace để thay menu của theme - Ở ô CSS Selector, điền địa chỉ của riêng thanh menu trong theme, đừng chọn cả khung header. CSS selector là tên định danh của từng vùng trên trang web. Nếu chưa biết lấy ở đâu, bạn mở Navi+ Live rồi bấm thẳng vào menu trên trang để lấy.
- Bấm lưu rồi tải lại trang web để kiểm tra.
Nếu chọn nhầm cả khung header, trang web sẽ mất luôn logo, ô tìm kiếm và giỏ hàng. Bạn chỉ chọn đúng khung nhỏ bọc quanh các mục menu thôi.
Khi đổi sang Replace mà menu cũ vẫn còn
Một số theme tạo tới hai bản menu riêng biệt, chẳng hạn một thanh menu ngang cho máy tính và một menu ngăn kéo cho điện thoại. Khi bạn thay bản này thì bản kia vẫn hiện. Bạn xử lý theo một trong hai cách sau:
Cách 1: Điền nhiều selector cùng lúc
Ô CSS Selector nhận nhiều địa chỉ cách nhau bằng dấu phẩy. Bạn gắn thêm đuôi (D) nếu chỉ áp dụng trên máy tính, (M) cho điện thoại, hoặc để trống nếu dùng cho cả hai. Ví dụ:
.header__inline-menu(D), .menu-drawer__navigation(M)
Bạn chỉ cần thay phần tên trước dấu ( bằng địa chỉ menu trên theme của mình.
Cách 2: Ẩn phần còn sót bằng CSS
Nếu muốn ẩn phần menu dư bằng mã định dạng giao diện, bạn mở menu trong Navi+, vào Configure > CSS rồi dán đoạn mã này vào:
/* Ẩn menu của theme trên máy tính.
Lý do: Navi+ đã thay menu, nhưng theme vẽ thêm một bản trong header. */
@media (min-width: 990px) {
.header__inline-menu { display: none; }
}
Bạn nên viết quy tắc thật gọn: chỉ nhắm vào một selector và một cỡ màn hình cụ thể. Làm vậy để sau này khi cập nhật theme, các phần khác trên header không bị ẩn nhầm.
Ngoài ra, một số theme có sẵn nút tắt hoặc đổi menu ngay trong trình chỉnh sửa giao diện. Bạn có thể vào Online Store > Themes > Customize kiểm tra thử trước khi dùng CSS.
Xử lý nút ☰ trên điện thoại
Nếu chạm nút ☰ trên điện thoại mà ngăn kéo menu cũ của theme vẫn mở ra cùng với Mobile Menu, bạn đừng ẩn nút ☰ đó đi. Hãy gán nút ☰ của theme làm nút mở cho Mobile Menu bằng cách điền CSS selector của nút ☰ vào phần cài đặt mở menu. Khi khách chạm vào, Mobile Menu của Navi+ sẽ mở ra và ngăn kéo cũ không bung lên nữa. Xem hướng dẫn tại bài Đưa Mobile Menu lên cửa hàng.
Đừng xoá menu gốc của Shopify
Bạn không cần xoá menu gốc trong mục Online Store > Navigation của Shopify, cũng không cần xoá mã trong theme. Navi+ tự thay menu trên giao diện mà không đụng vào code gốc. Cứ giữ nguyên menu cũ để sau này nếu bạn tắt hoặc gỡ app, menu của theme sẽ tự hiện lại và cửa hàng không bị trống thanh điều hướng.
Mã đã xoá khỏi theme vẫn mất kể cả khi bạn gỡ Navi+. Bạn sẽ không còn menu nào.
Sửa lỗi thường gặp
Menu cũ nháy lên rồi mới biến mất
Do trình duyệt vẽ menu của theme trước rồi Navi+ mới thay vào sau. Từ 05/11/2026 menu đã in sẵn vào trang nên hầu như không còn nháy. Nếu vẫn thấy, trong cửa sổ Publish bấm Setup ở dòng Add a loading effect (optional) cuối cửa sổ. Xem cách làm tại bài Cài đặt giúp menu tải nhanh, không nháy.
Đã ẩn trên máy tính nhưng điện thoại vẫn còn
Mỗi thiết bị thường dùng một khung menu và quy tắc CSS riêng. Bạn điền thêm selector có đuôi (M) cho điện thoại, hoặc viết thêm một quy tắc CSS cho màn hình nhỏ.
Gỡ Navi+ xong web mất luôn menu
- Nếu bạn ẩn menu của theme bằng CSS đặt bên trong Navi+, khi gỡ app thì đoạn CSS này tự mất theo và menu của theme sẽ hiện lại.
- Nếu trước đó bạn từng sửa hoặc xoá mã trong theme, hãy khôi phục lại từ lịch sử phiên bản của theme trong Shopify, hoặc dùng lại bản sao theme cũ mà bạn còn giữ.
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”. Bạn chỉ đặt bằng CSS selector và chọn Replace như trên.
WordPress và website khác không có app block “Menu in Section”. Chỉ đặt bằng CSS selector: chọn Replace và nhập selector của menu hiện có. Muốn ẩn phần còn sót, dán CSS vào ô CSS của menu.