Tuỳ chọn khi đặt menu vào trang

Khi bấm sang bước Publish để chọn vị trí đặt menu, bạn sẽ thấy thêm vài tuỳ chọn phụ. Các ô này chỉ hiện khi bạn làm menu nằm ngay trong trang như Desktop Mega Menu và Icon Menu. Nếu bạn làm Tab Bar, Floating Button hay Mobile Menu thì sẽ không thấy chúng.

Chọn kiểu đặt và chỗ đặt

Ba ô dưới đây nằm trong thẻ Somewhere else của cửa sổ Publish. Hai thẻ còn lại (Replace your main menu, Add below your header) tự nhận chỗ giúp bạn nên bạn không phải gõ gì. Bạn chỉ cần các ô này khi muốn đặt menu ở một chỗ khác trên trang.

Select how to place the menu

Ô này nằm trong thẻ Somewhere else (dòng nhỏ Choose the menu spot and how to insert the menu), ngay trên ô CSS Selector. Nó cho Navi+ biết menu của bạn nằm ở đâu so với phần tử bạn chỉ định: thay vào chỗ đó, nằm sau, hay nằm trước.

• Lựa chọn: ba thẻ Insert after (ngay sau phần tử đó), Replace (thế chỗ phần tử đó), Insert before (ngay trước phần tử đó). Riêng Icon Menu có thêm lựa chọn thứ tư là thẻ Below another Icon Menu, xem phần Xếp Icon Menu nằm dưới một Icon Menu khác.
• Mặc định cho menu mới: Replace. Trên Shopify, hai thẻ Replace your main menu (chỉ Desktop Mega Menu) và Add below your header cũng dùng chính ô này ở phía sau: thẻ đầu đặt kiểu Replace, thẻ sau đặt kiểu Insert after. Nên bạn thường không phải chạm vào ô này.
• Áp cho: Desktop Mega Menu, Mobile Mega Menu và Icon Menu, áp cho cả menu (không theo cấp hay từng mục). Không đòi gói riêng. Có trên Shopify, Wix và website khác.
• Đổi thì khách thấy gì: với Replace, menu Navi+ đứng đúng vào chỗ phần tử đích còn menu gốc của theme được giấu đi. Với Insert after hoặc Insert before, phần tử đích vẫn hiện bình thường, menu Navi+ nằm liền kề ngay sau hoặc ngay trước nó.

Publish

Method 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn off

STEP 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).

Insert afterReplaceInsert before

CSS Selector (How?)header

STEP 3Optimize speed & experience Setup

STEP 4Test this menu Open Test

Method 2: Insert as an App block in your theme editor

CSS Selector

Ô gõ chữ nằm ngay dưới ba kiểu đặt. Bạn gõ vào đây địa chỉ (CSS selector) của phần tử trên trang cửa hàng, kiểu #id-cua-phan-tu hoặc .ten-class. Navi+ lấy phần tử này làm mốc để thay vào, chèn sau hoặc chèn trước.

• Mặc định cho menu mới: để trống. Ô có gợi ý mờ #id_of_element, .class_name (separate with , or ;).
• Dưới ô có sẵn: liên kết see the theme catalog (danh mục selector đã đo sẵn cho 331 theme Shopify), dòng Several match? Only the first is used. và nút Pick it in Live mode.
• Chỉ đặt cho một loại màn hình: thêm (M) ở cuối selector để chỉ hiện trên điện thoại, thêm (D) để chỉ hiện trên máy tính. Không thêm gì thì hiện cả hai. Ví dụ #my-header(M). Với các thẻ gợi ý, app tự gắn (D) cho Desktop Mega Menu và (M) cho Mobile Mega Menu.
• Gõ nhiều selector (cách nhau bằng dấu phẩy hoặc chấm phẩy): app dùng selector đầu tiên.
• Áp cho: Desktop Mega Menu, Mobile Mega Menu và Icon Menu. Với Icon Menu, khi bạn chọn Below another Icon Menu thì ô này không dùng nữa, bạn chọn Icon Menu từ danh sách.
• Đổi thì khách thấy gì: đổi selector là đổi chỗ menu nằm trên trang. Nếu selector không khớp phần tử nào trên trang, Navi+ không tìm được chỗ đặt. Cách lấy selector không cần biết code ở bài Tìm chỗ đặt menu bằng Navi+ Live.

Pick it in Live mode

Đây là nút nhỏ nằm dưới ô CSS Selector, không phải một ô nhập. Bấm vào, Navi+ mở cửa hàng của bạn ở một tab mới với Navi+ Live để bạn chọn phần tử bằng chuột, không cần tự đoán selector.

• Cách dùng: ở tab cửa hàng, rê chuột lên phần tử bạn muốn (dùng phím mũi tên để chọn phần tử cha hoặc con), bấm Copy hoặc nhấn Cmd/Ctrl + C, rồi quay lại cửa sổ Publish dán vào ô CSS Selector. Navi+ không tự điền hộ, bạn phải dán.
• Áp cho: mọi menu có ô CSS Selector trong thẻ Somewhere else.
• Gặp cửa hàng có mật khẩu: nhập mật khẩu ở tab kia trước, rồi bấm Reopen trong hộp chờ.

3 tuỳ chọn thêm khi đặt menu vào trang

Tuỳ chọn	Dùng cho	Khi nào có tác dụng	Mặc định
Auto text color	Desktop Mega Menu	Chọn cách đặt Replace và menu để nền trong suốt	Bật
Spacing và đường kẻ	Icon Menu	Chọn đặt ở thẻ Below another Icon Menu	Spacing 16, không đường kẻ
Keep the menu at the top	Menu đặt bằng app block trên Shopify	Đặt bằng Method 2 qua app block	Tắt

Tự đổi màu chữ theo header với Auto text color

Nhiều theme làm header trong suốt nằm đè lên ảnh banner đầu trang, chữ menu màu trắng. Khi khách cuộn xuống, nền header tự chuyển sang màu trắng. Nếu chữ menu của bạn giữ nguyên màu trắng thì chữ sẽ chìm vào nền, không đọc được nữa. Khi bật ô này, chữ trên menu Navi+ sẽ tự đổi màu cùng lúc với chữ menu gốc của theme.

Publish

Method 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn off

STEP 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 nav

STEP 3Optimize speed & experience Setup

STEP 4Test this menu Open Test

Method 2: Insert as an App block in your theme editor

• Tên ô trên màn hình là Auto text color — follow your header, mặc định đang bật sẵn. Ở giao diện Publish mới, khi ô này đang bật thì nó nằm gập bên dưới nút Advanced settings — bạn bấm vào Advanced settings để mở ra.
• Ô này chỉ hiện khi bạn chọn cách đặt Replace để menu Navi+ thế chỗ menu gốc của theme. Nếu bạn chọn Insert before hoặc Insert after, menu gốc vẫn hiện song song nên không có màu nào để lấy theo và ô này sẽ ẩn đi.
• Tính năng này chỉ chạy với Desktop Mega Menu đang để nền trong suốt. Bạn bật nền trong suốt tại ô Is Transparent ở bước Design, phần khung menu cấp 1. Nếu khung menu có màu nền riêng, Navi+ sẽ giữ nguyên màu chữ bạn chọn chứ không tự đổi.
• Khi chạy, Navi+ giữ menu gốc của theme ở trạng thái ẩn rồi liên tục đọc màu chữ của nó để gán cho chữ cấp 1 trên menu Navi+. Nhờ vậy chữ đổi màu mượt cùng lúc với theme, cả khi khách cuộn trang lẫn khi rê chuột vào header.

Xếp Icon Menu nằm dưới một Icon Menu khác

Khi muốn đặt một Icon Menu nằm ngay dưới một Icon Menu đã lên trang mà không cần tìm CSS selector, bạn chọn thẻ Below another Icon Menu. Trên thẻ có dòng mô tả Stack this menu right after an Icon Menu you already published — spacing and a divider line optional.

Bên trong thẻ có các ô sau:

Ô	Tác dụng	Mặc định
Icon Menu	Chọn Icon Menu nằm phía trên. Lúc mới mở, ô này hiện chữ — Choose an Icon Menu —. Nếu bạn chưa chọn thì menu đang làm sẽ không hiện trên cửa hàng	Chưa chọn
Spacing (px)	Khoảng cách hở giữa hai menu	16
Add a line above this menu, separating it from the Icon Menu above	Bật lên để kẻ một đường ngăn cách giữa hai menu	Tắt

Khi bạn bật ô kẻ đường ngăn cách, bốn ô chỉnh chi tiết sẽ hiện thêm:

Ô	Các lựa chọn	Mặc định
Type	Kiểu nét kẻ: Solid, Dashed, Dotted, Double	Solid
Color	Màu của đường kẻ	#EEEEEE
Size (px)	Độ dày đường kẻ	1
Width	Chọn Full để kẻ hết bề ngang, hoặc Inset để thụt lề vào 16px mỗi bên cho khớp với lề của Icon Menu	Full

Trong danh sách chọn, những Icon Menu nào đang được xếp nằm dưới chính menu này sẽ bị làm xám kèm dòng chữ (already follows this menu). Bạn không chọn được chúng để tránh việc hai menu xếp nối đuôi nhau thành vòng tròn.

Các ô trong thẻ này chỉ có ở Icon Menu, không có ở Mega Menu. Chi tiết từng ô:

Spacing (px)

Ô số trong thẻ Below another Icon Menu: khoảng hở giữa Icon Menu này và Icon Menu nằm phía trên.

• Đơn vị và mặc định: px, mặc định 16. Để trống hoặc gõ số không hợp lệ thì Navi+ dùng 16.
• Áp cho: chỉ Icon Menu, và chỉ khi đang chọn thẻ Below another Icon Menu. Không đòi gói riêng.
• Đổi thì khách thấy gì: khoảng trống giữa hai dãy Icon Menu to ra hoặc nhỏ lại đúng bằng số px bạn gõ. Khi có đường kẻ ngăn cách, mỗi phía của đường kẻ cách một lần số này.

Divider between Icon Menus

Công tắc nằm dưới ô Spacing (px), nhãn trên app là Add a line above this menu, separating it from the Icon Menu above. Bật lên để kẻ một đường ngang giữa hai Icon Menu.

• Mặc định: tắt.
• Áp cho: chỉ Icon Menu, và chỉ khi đang chọn thẻ Below another Icon Menu.
• Khi bật: hiện thêm bốn ô Type, Color, Size (px) và Width ngay bên dưới, xếp trên một hàng.
• Đổi thì khách thấy gì: giữa hai Icon Menu có một đường kẻ riêng đứng độc lập, không nằm trong khung của menu nào. Khi tắt thì chỉ còn khoảng hở bằng Spacing.

Type

Bốn nút chọn kiểu nét cho đường kẻ giữa hai Icon Menu, mỗi nút có một nét vẽ mẫu.

• Lựa chọn: Solid (liền), Dashed (gạch ngắn), Dotted (chấm), Double (hai nét). Mặc định Solid.
• Chỉ hiện khi: công tắc Add a line above this menu… đang bật. Chỉ có ở Icon Menu.
• Đổi thì khách thấy gì: đường kẻ đổi kiểu nét tương ứng. Giá trị lạ (không phải bốn kiểu trên) được coi như Solid.

Color

Ô chọn màu của đường kẻ giữa hai Icon Menu. Bấm vào ô để mở bảng màu hoặc gõ mã dạng #RRGGBB.

• Mặc định: #EEEEEE (xám nhạt).
• Chỉ hiện khi: công tắc Add a line above this menu… đang bật. Chỉ có ở Icon Menu.
• Đổi thì khách thấy gì: đường kẻ đổi sang màu đó. Mã màu phải bắt đầu bằng # và đúng dạng hex, nếu không Navi+ quay về #EEEEEE.

Size (px)

Ô số: độ dày của đường kẻ giữa hai Icon Menu.

• Đơn vị và mặc định: px, mặc định 1. Nhỏ hơn 1 hoặc để trống thì dùng 1.
• Chỉ hiện khi: công tắc Add a line above this menu… đang bật. Chỉ có ở Icon Menu.
• Đổi thì khách thấy gì: đường kẻ dày hoặc mảnh hơn.

Width

Hai nút chọn độ dài đường kẻ giữa hai Icon Menu.

• Lựa chọn: Full (kẻ hết bề ngang, mặc định) và Inset (thụt vào 16px mỗi bên cho khớp lề của Icon Menu).
• Chỉ hiện khi: công tắc Add a line above this menu… đang bật. Chỉ có ở Icon Menu.
• Đổi thì khách thấy gì: đường kẻ chạy sát hai mép hoặc ngắn lại, chừa lề hai bên.

Giữ menu dính ở đầu trang khi khách cuộn

Khi mở thẻ Method 2: Insert as an App block in your theme editor — nơi có sẵn mã Menu ID để bạn sao chép — bạn sẽ thấy ô Keep the menu at the top of the page when scrolling up. Bật ô này lên để menu luôn dính ở mép trên màn hình khi khách cuộn trang.

• Mặc định ô này đang tắt.
• Áp cho cả menu của Desktop Mega Menu, Mobile Mega Menu và Icon Menu. Không đòi gói riêng.
• Tuỳ chọn này chỉ có trên Shopify vì dùng tính năng app block của Shopify.
• Ô này chỉ có tác dụng khi bạn đặt menu bằng app block Menu in Section trong theme editor. Nếu bạn đặt menu theo Method 1 bằng vị trí có CSS selector, bật ô này sẽ không làm gì cả.
• Khi khách cuộn qua khỏi vị trí ban đầu của menu và menu bắt đầu dính ở đầu trang, Navi+ sẽ tự thêm một lớp bóng mờ nhẹ bên dưới nếu bạn chưa bật bóng đổ cho khung menu.

Publish

Method 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn off

STEP 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 nav

STEP 3Optimize speed & experience Setup

STEP 4Test this menu Open Test

Method 2: Insert as an App block in your theme editorCopy “Menu ID”SF-5087000775Then, paste it into the app block called “Menu in Section” in your theme editor.

Nền tảng khác

Shopify Wix Website khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.

Tra cứu nhanh các ô trên màn hình

Ô trên app	Dùng cho menu	Mặc định	Lưu ý khi dùng
Auto text color — follow your header	Desktop Mega Menu	Bật	Chỉ chạy khi chọn Replace và nền menu trong suốt
Icon Menu	Icon Menu	— Choose an Icon Menu —	Bắt buộc chọn để menu hiện lên trang
Spacing (px)	Icon Menu	16	Chỉ có ở thẻ Below another Icon Menu
Add a line above this menu…	Icon Menu	Tắt	Bật lên sẽ mở thêm Type, Color, Size (px), Width
Type	Icon Menu	Solid	Chọn Solid, Dashed, Dotted hoặc Double
Color	Icon Menu	#EEEEEE	Mã màu của đường kẻ
Size (px)	Icon Menu	1	Độ dày đường kẻ tính bằng px
Width	Icon Menu	Full	Chọn Full hoặc Inset
Keep the menu at the top of the page when scrolling up	Menu đặt bằng app block	Tắt	Chỉ có trên Shopify, chỉ chạy với Method 2
Select how to place the menu	Mega Menu, Icon Menu	Replace	Chọn Insert after, Replace hoặc Insert before
CSS Selector	Mega Menu, Icon Menu	Trống	Thêm (M) hoặc (D) để chỉ hiện trên điện thoại hoặc máy tính
Pick it in Live mode	Mọi menu có ô CSS Selector	—	Chọn phần tử trên cửa hàng, copy rồi dán lại