Navi+ đặt menu vào đúng vị trí bạn chỉ định trong bảng Publish. Nếu bạn chọn vùng quá rộng, menu sẽ đè mất cả header. Nếu chọn sai hướng chèn, menu sẽ nhảy lệch lên trên hoặc xuống dưới.
Chuẩn bị trước khi sửa
- Mở menu bị lỗi trong Navi+ rồi vào bảng Publish. Ngay đầu bảng là Navigation selector map — nơi liệt kê sẵn các vùng trên theme mà Navi+ nhận diện được như header hay menu chính.
- Mở thêm Navi+ Live ngoài trang cửa hàng nếu bạn muốn tự bấm chọn vị trí đặt menu.
Bật menu xong thì mất cả logo và giỏ hàng
Khi vừa bật menu, bạn thấy logo, ô tìm kiếm và giỏ hàng của theme biến mất sạch, trên đầu trang chỉ còn mỗi menu Navi+.
Lý do là bạn đang chọn Replace vào cả khối header. Vì khối header bao gồm cả logo lẫn giỏ hàng, Navi+ đã thay thế toàn bộ khối đó bằng menu mới.
Để giữ lại logo và giỏ hàng, bạn chỉ cần chọn lại vùng nhỏ hơn — đúng chỗ chứa thanh menu cũ. Xem các bước làm ở mục Chọn lại đúng vùng chứa menu cũ bên dưới.
Menu nằm lệch lên trên header hoặc nhảy sai chỗ
Menu đã hiện ra nhưng lại nằm tuốt phía trên header thay vì ở dưới, hoặc chen vào sát cạnh logo thay vì nằm giữa thanh điều hướng.
Hai tùy chọn Insert before và Insert after sẽ giữ nguyên vùng cũ trên trang và chèn menu Navi+ vào ngay trước hoặc ngay sau vùng đó. Nếu bạn chọn nhầm hướng chèn hoặc chọn nhầm vùng, menu sẽ rơi sai vị trí.
Bạn chỉnh lại theo đúng vị trí mình muốn:
- Muốn menu nằm ngay dưới header: chọn dòng header rồi bấm Insert after.
- Muốn thay hẳn thanh điều hướng cũ của theme: chọn dòng main menu của menu chính rồi bấm Replace.
- Nếu menu chỉ lệch một chút: thử đổi qua lại giữa Insert before và Insert after trước khi đi tìm vùng khác.
Nếu trên trang có nhiều vùng trùng một địa chỉ CSS selector, Navi+ sẽ gắn menu vào vùng đầu tiên. Bạn hãy chọn địa chỉ cụ thể hơn để menu không gắn nhầm chỗ.
Giao diện đẹp trên máy tính nhưng vỡ trên điện thoại
Menu nhìn chuẩn trên máy tính nhưng khi mở bằng điện thoại lại đè lên logo, hoặc thanh danh mục bị tụt xuống dưới header máy tính.
Lỗi này thường do 3 nguyên nhân:
- Theme của bạn tách riêng hai header cho máy tính và điện thoại, nên địa chỉ bạn chọn chỉ khớp với một bên.
- Bạn đang dùng Desktop Mega Menu cho cả điện thoại. Loại menu này chỉ dành cho màn hình rộng nên không thay thế menu điện thoại được. Trên điện thoại, bạn cần tạo riêng Mobile Menu hoặc Mobile Mega Menu.
- Với Mobile Mega Menu, bạn nên chọn Insert after vào vùng header của theme và cài đặt để menu chỉ hiện trên điện thoại.
Khi sửa, bạn nhớ là địa chỉ trong bảng Publish chỉ áp dụng cho thiết bị của loại menu đó: Desktop Mega Menu đi với máy tính, còn Mobile Mega Menu đi với điện thoại. Bạn hãy chọn đúng vùng của thiết bị đang xem và mở lại bằng điện thoại thật, đừng chỉ kiểm tra trên trình duyệt máy tính.
Chọn lại đúng vùng chứa menu cũ
Nguyên tắc là chọn vùng nhỏ nhất vừa đủ bao quanh menu cũ. Vùng này phải đủ hẹp để không dính logo hay giỏ hàng, nhưng đủ rộng để ôm trọn các mục menu.
-
Mở menu trong Navi+, bấm Publish rồi nhìn vào bảng Navigation selector map ngay đầu bảng.
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 -
Bấm vào dòng main menu của menu chính thay vì dòng header để sao chép địa chỉ, sau đó dán vào ô CSS selector.
-
Chọn Replace để thay menu cũ. Nếu bạn chỉ muốn thêm một hàng danh mục mà vẫn giữ lại menu của theme, hãy dùng dòng header rồi chọn Insert after.
-
Bấm Save ở góc trên và tải lại trang cửa hàng.
Không thấy dòng nào hợp trong bảng gợi ý? Bạn mở Navi+ Live trên cửa hàng rồi bấm thẳng vào thanh điều hướng cũ. Nếu khung chọn của Live bao trùm vùng quá rộng, bạn bấm chọn lại một vùng nhỏ hơn nằm bên trong đó.
Làm đủ bước mà menu vẫn lệch?
Nếu menu vẫn nằm sai chỗ, bạn thử lần lượt 3 bước sau:
- Đổi cách đặt từ Replace sang Insert after hoặc ngược lại trước, rồi mới đổi địa chỉ CSS selector.
- Tạm gỡ hoặc tắt các app khác cũng chỉnh sửa header như thanh thông báo hay app menu khác để loại trừ xung đột.
- Gửi địa chỉ cửa hàng và tên theme cho chúng tôi theo hướng dẫn 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, nên Navi+ đặt menu bằng CSS selector. Vì vùng cần chọn nằm trên trang Wix, bạn hãy mở Navi+ Live để tìm địa chỉ và vẫn giữ đúng quy tắc chọn vùng nhỏ nhất bao quanh menu cũ.
WordPress và các website khác không có app block Menu in Section, nên chỉ đặt menu bằng CSS selector. Bảng gợi ý Navigation selector map theo theme chỉ có trên Shopify; ở website khác, bạn dùng Navi+ Live để tự tìm địa chỉ và vẫn chọn vùng nhỏ nhất bao quanh menu cũ.