Photo Gallery 플러그인 메뉴 가려짐 해결 방법｜워드프레스 CSS 수정

Photo Gallery 플러그인 메뉴 가려짐 문제가 발생하면 사이트 상단 메뉴를 열어도 드롭다운 메뉴가 갤러리 뒤로 숨어버리는 현상이 나타날 수 있습니다. 저 역시 워드프레스에서 여러 갤러리 플러그인을 테스트하던 중 Photo Gallery 플러그인을 적용한 후 같은 문제를 경험했습니다.

평소에는 정상적으로 보이던 메뉴가 특정 갤러리 페이지에서만 가려졌기 때문에 처음에는 Astra 테마 문제나 캐시 문제를 의심했습니다. 여러 설정을 확인한 결과 메뉴 자체의 문제가 아니라 갤러리 영역의 z-index 우선순위 때문에 발생하는 현상이었습니다.

메뉴가 갤러리 아래로 숨어버리는 현상

문제는 메뉴를 펼쳤을 때 바로 확인할 수 있었습니다. 드롭다운 메뉴는 정상적으로 열리지만 실제 화면에서는 갤러리 이미지가 메뉴 위를 덮어버리면서 일부 항목이 보이지 않았습니다. 방문자가 메뉴를 사용할 수 없는 상태가 되기 때문에 사용자 경험에도 좋지 않은 영향을 줄 수 있습니다.

이 문제는 Photo Gallery 플러그인 자체의 오류라기보다 테마와 플러그인 사이의 레이어 우선순위 충돌로 나타나는 경우가 많습니다.

추가 CSS에서 해결할 수 있었다

플러그인 설정을 살펴봤지만 관련 옵션은 찾을 수 없었습니다. 공식 지원 문서를 확인해 보니 추가 CSS를 이용해 해결하는 방법이 안내되어 있었습니다.

워드프레스 관리자 화면에서 외모 → 사용자 정의하기 → 추가 CSS 로 이동하면 됩니다.

해당 위치에 아래 코드를 추가했습니다.

div#bwg_container3_0 {
    z-index: 0 !important;
}

CSS 적용 후 메뉴가 정상적으로 표시됐다

추가 CSS 영역에 코드를 입력한 후 저장했습니다.

적용 직후에는 변화가 보이지 않을 수도 있습니다. LiteSpeed Cache나 브라우저 캐시가 남아 있다면 이전 화면이 계속 표시될 수 있기 때문입니다. 저는 LiteSpeed Cache 캐시를 비운 후 다시 확인했고, 메뉴가 갤러리 위에 정상적으로 표시되는 것을 확인할 수 있었습니다.

적용 후 변화

Photo Gallery 플러그인 메뉴 가려짐 문제가 해결된 후에는 드롭다운 메뉴가 정상적으로 동작했습니다. 특히 모바일 메뉴에서도 같은 현상이 발생하지 않았고, Astra 테마와 함께 사용해도 추가 충돌은 발견되지 않았습니다. 며칠 동안 테스트한 결과 메뉴 접근 문제도 다시 나타나지 않았습니다.

갤러리 플러그인을 사용하는 사이트라면 Photo Gallery 플러그인 메뉴 가려짐 문제처럼 메뉴가 이미지 뒤로 숨어 있는지 한 번 정도 확인해 보는 것이 좋습니다.

FAQ

관련 글 추천

• 고아 콘텐츠 찾기 플러그인으로 내부 링크 문제 해결하는 방법
• BuddyPress 이미지 추가 플러그인 MediaPress 설정 방법 정리
• FooGallery 사용법 정리 – 워드프레스 갤러리 플러그인 설정 후기
• Polylang 번역 플러그인 사용 방법, 직접 운영하면서 정리한 설정 흐름