CSS 선택자에 메뉴 표시

사용 가이드 모든 요금제 2 분 소요

앱은 일치하는 모든 요소의 안에 메뉴를 넣고 기존 내용을 교체합니다. 자동으로 교체와 기존 메뉴 교체가 작동하지 않는 사용자 지정 테마나 많이 수정된 테마, 특정 위치, 데스크톱 전용 또는 모바일 전용 메뉴에 사용하세요.

참고

앱은 이 옵션을 개발자용이거나 다른 옵션이 작동하지 않을 때 사용하도록 권장합니다. CSS 선택자가 익숙하지 않으신가요? 문의하기를 통해 연락 주시면 무료로 메뉴를 설치해 드립니다.

CSS 선택자 설정하기

1. 이 CSS 선택자에 메뉴 표시 선택하기

   메뉴 편집기의 왼쪽 바에서 설정 탭을 클릭합니다. 위치에서 이 CSS 선택자에 메뉴 표시를 선택합니다.

   

   두 개의 선택자 필드가 있는 이 CSS 선택자에 메뉴 표시

2. 선택자 입력하기

   설정에 설명된 두 필드를 입력합니다. 회색으로 표시된 #SiteNav와 #AccessibleNav는 자리 표시자이며 저장된 값이 아닙니다.

3. 저장 및 게시하기

   저장을 클릭한 다음 메뉴를 게시합니다. 데스크톱과 모바일에서 스토어를 확인하세요.

설정

메인 메뉴의 CSS 선택자

데스크톱 메뉴를 담는 요소입니다. 예: #SiteNav, .header__inline-menu, nav.main-menu. 비워 두면 모바일에만 메뉴가 표시됩니다.

모바일 메뉴의 CSS 선택자

모바일 메뉴를 담는 요소입니다. 예: #AccessibleNav, .menu-drawer. 비워 두면 테마의 모바일 메뉴가 유지됩니다(데스크톱 전용).

• 여러 요소: 선택자를 쉼표로 구분합니다. 예: .header__inline-menu, .sticky-header nav. 일치하는 모든 요소에 메뉴가 들어갑니다.
• 두 레이아웃에 한 요소: 두 필드에 같은 선택자를 입력합니다. 앱이 화면 크기에 따라 데스크톱과 모바일 레이아웃을 전환합니다.
• 링크 하나가 아니라 컨테이너를 선택하세요: 메뉴 전체를 감싸는 요소(보통 <nav> 또는 <ul>)를 지정하세요. 그렇지 않으면 메뉴가 항목 하나 안에 들어갑니다.
• 안정적인 선택자를 사용하세요: ID나 .header__inline-menu 같은 테마 클래스를 사용하세요. body > div:nth-child(3) > … 같은 자동 생성 선택자는 테마가 바뀌면 작동하지 않습니다.

CSS 선택자 찾기

필드 아래의 메뉴의 CSS 선택자를 찾는 방법을 클릭해도 됩니다.

1. 메뉴 검사하기

   Chrome에서 스토어를 열고 메뉴를 마우스 오른쪽 버튼으로 클릭한 후 검사를 선택합니다.

2. 메뉴 컨테이너 찾기

   요소 패널에서 태그 위에 마우스를 올립니다. 강조 표시가 메뉴 전체를 덮는 가장 가까운 <nav> 또는 <ul>을 찾으세요.

3. 선택자 복사하기

   #과 id(#SiteNav) 또는 .과 명확한 클래스(.header__inline-menu)를 사용합니다. 그렇지 않으면 태그를 마우스 오른쪽 버튼으로 클릭하고 복사 > selector 복사를 선택한 다음 앱에 붙여 넣으세요.

4. 모바일에서 반복하기

   DevTools에서 기기 아이콘을 클릭하고 휴대폰을 선택한 다음 모바일 메뉴(햄버거 아이콘)를 엽니다. 같은 방법으로 모바일 선택자를 찾으세요.

팁

저장하기 전에 선택자를 테스트하세요. DevTools 콘솔에서 document.querySelectorAll('your-selector')를 실행합니다. 빈 목록이 나오면 선택자가 잘못된 것입니다.

테마에 메뉴가 전혀 없는 곳에 메뉴를 넣고 싶으신가요? 사용자 지정 메뉴 위치 추가를 참고하세요.

관련 페이지

• 사용자 지정 메뉴 위치 추가테마 코드에 컨테이너를 직접 추가해 원하는 위치에 정확히 메뉴를 표시합니다.
• 데스크톱과 모바일에 다른 메뉴를 사용할 수 있나요?데스크톱과 모바일에 서로 다른 메뉴를 표시하거나, 기기별로 일부 항목을 숨깁니다.
• 스토어에 메뉴가 표시되지 않는 이유는?스토어에 메뉴가 없거나 잘못 표시될 때 확인할 단계별 체크리스트입니다.

도움이 되었나요?

문제 신고