사이드바의 햄버거 아이콘이 표시되지 않습니다

사이드바 기능을 설정했는데, 햄버거 아이콘이 보이지 않습니다. 아래 이미지와 같은 상태입니다:

하지만 마우스를 해당 영역 위에 올리면 아이콘이 나타납니다:

커서를 해당 영역에 올려놓지 않아도 아이콘이 항상 보이도록 설정하는 방법은 무엇인가요?

안녕하세요,

--header_primary-low-mid(기본 헤더 버튼 색상 변수)가 --header_primary(헤더) 색상(#fff)과 동일한 것 같습니다. 이 때문에 사이드바 아이콘이 보이지 않는 것입니다. 고객님의 사이트에서 확인해 본 결과, 다른 헤더 아이콘에는 --tertiary 색상 변수가 사용되고 있습니다. 사이드바 버튼 색상도 변경할 수 있습니다. 또는 header_primary-low-mid 색상을 변경하여 아이콘이 보이도록 할 수도 있습니다.

새로운 테마 컴포넌트를 생성하거나 기존 컴포넌트에 다음 내용을 추가하세요.

Desktop > CSS

.header-sidebar-toggle {
  button {
    .d-icon {
      color: var(--tertiary);
    }
  }
}

빠른 답변 감사합니다!
하지만 말씀하신 변수를 아직 찾지 못하겠습니다:


어떤 변수인가요?

글쎄, 제 생각에는 이 중 어느 것도 헤더 버튼의 색상을 제어할 수 없는 것 같습니다. 이는 색상을 변경할 수 있는 커스텀 테마입니다. 원격 테마일 가능성이 높으므로 color 변수를 변경할 수 없을 수 있지만, /admin/customize/colors (관리자 > 커스터마이즈 > 색상) 페이지에서 확인할 수 있습니다. 해당 페이지에서 사용하는 색상 팔레트를 선택하고 header_primary-low-mid 변수를 검색해 보세요. 변경할 수 없다면 테마 제작자에게 문의해야 합니다.

또는

사이드바 버튼 색상을 변경하는 새로운 테마 컴포넌트를 추가해 볼 수 있습니다.

  1. /admin/customize/themes/로 이동합니다.
    커스터마이즈 → 테마
  2. Components 탭을 클릭한 후 Install 버튼을 클릭합니다.
  3. 팝업 창에서 + Create new 탭을 클릭하고 새 컴포넌트 이름을 입력합니다.

  1. Create 버튼을 클릭합니다.
  2. 컴포넌트가 생성됩니다. 이제 활성화할 테마를 선택하세요.
  3. Edit CSS/HTML 버튼을 클릭합니다.
  4. Desktop 탭을 클릭하고 아래 코드를 CSS 섹션에 붙여넣습니다.

.header-sidebar-toggle {
  button {
    .d-icon {
      color: var(--tertiary);
    }
  }
}
  1. Save 버튼을 클릭합니다. 완료 :slightly_smiling_face:

정말 대단해요, 도움 주셔서 감사합니다. 제 문제가 완벽하게 해결되었어요 =]