GeneratePress 워드프레스 블로그의 모바일 버전에서 사용하지 않는 메뉴 ‘더 보기’ 버튼이 공간을 차지하거나 방문자의 주의를 분산시킬 수 있습니다. 이 글에서는 불필요한 모바일 상단 메뉴 아이콘을 간단한 CSS 코드로 숨기는 방법을 소개합니다.


워드프레스 GeneratePress 테마에서 모바일 상단 메뉴 숨기는 방법

워드프레스 블로그를 운영할 때 GeneratePress 테마는 많은 인기를 얻고 있습니다. 이 테마는 가볍고 빠른 로딩 속도로 검색 엔진 순위를 향상하는 데 도움을 줍니다. 또한 모바일 기기에 대한 반응형 디자인을 제공하며 다양한 레이아웃 커스터마이징이 가능합니다. GeneratePress 테마는 무료 버전과 유료 버전이 모두 제공되며, 이 글에서는 무료 버전에서 CSS 코드를 입력하는 방법으로 모바일 메뉴를 숨기는 방법을 다룹니다.

CSS(Cascading Style Sheets) 코드는 웹페이지의 스타일과 레이아웃을 제어하는 언어로, 시각적인 효과를 주는 데 사용됩니다.

모바일 메뉴를 숨기려면 먼저 사용 중인 GeneratePress 테마의 모바일 버전에서 메뉴의 CSS 클래스 이름을 찾아야 합니다. 워드프레스 테마에 따라 모바일 메뉴의 이름이 다를 수 있습니다. 그다음, 찾은 CSS 클래스 이름을 사용하여 모바일 메뉴 요소를 숨기는 데 필요한 CSS 코드를 입력합니다.

워드프레스 GeneratePress 테마에서 모바일 메뉴 숨기는 단계

  1. 워드프레스 웹사이트 관리자 페이지로 이동
  2. “외모” 메뉴를 선택하고 “사용자 정의하기”를 클릭
  3. “추가 CSS” 탭을 선택
  4. 화면 왼쪽 하단에서 모바일 아이콘을 클릭하여 모바일 버전으로 전환
  5. 모바일 화면의 메뉴 요소 위에 마우스를 올리고 우클릭한 후 “검사”를 클릭하여 개발자 도구 열기
  6. 개발자 도구 화면에서 마우스를 위아래로 이동하여 메뉴 블록 찾기
  7. “추가 CSS”에 CSS 코드(아래 참조)를 입력
  8. 왼쪽 상단의 “발행(공개)” 버튼을 클릭하여 변경 사항을 저장

① 워드프레스 웹사이트 관리자 페이지 → 외모 → 사용자 정의하기 → 추가 CSS → 왼쪽 하단 메뉴의 모바일 아이콘 클릭해서 모바일 버전으로 전환하고 편집합니다.

워드프레스 GeneratePress 테마에서 모바일 메뉴 숨기는 방법 첫 단계 관리자 페이지
워드프레스 GeneratePress 테마에서 모바일 메뉴 숨기는 방법 메뉴에서 모바일 버전으로 전환

② 오른쪽의 미리보기 모바일 화면의 메뉴 요소 위에 마우스 놓고 우클릭 → 팝업창 메뉴에서 검사를 클릭하면 개발자 도구 화면이 열립니다. 화면 상단에 ‘DevTools is now available’ 메시지가 표시됩니다.

워드프레스 GeneratePress 테마에서 모바일 메뉴 숨기는 방법-개발자 도구 화면 열기

③ 개발자 도구 화면에서 마우스를 위아래로 이동하여 메뉴 블록이 선택되는 지점을 찾습니다.

워드프레스 GeneratePress 테마에서 모바일 메뉴 숨기는 방법-개발자 도구 화면에서 모바일 메뉴 CSS 클래스 이름 찾기


숨기려는 메뉴 이름을 찾았다면 이제 ‘추가 CSS’에 아래와 같이 코드를 입력합니다. GeneratePress 테마의 경우 메뉴 요소 이름은 ‘main-navigation .inside-navigation’ 입니다.

/* 모바일 메뉴 요소 숨기기 */
.main-navigation .inside-navigation {
    display: none;
}


위와 같이 입력하면 오른쪽 미리보기 화면에서 메뉴 요소가 보이지 않게 됩니다.

워드프레스 GeneratePress 테마에서 모바일 메뉴 숨기는 방법-CSS 코드 입력

④ 왼쪽 메뉴 상단의 ‘발행(공개)’을 클릭하면 바로 적용됩니다.

■ 참고

마무리

모바일 메뉴를 다시 표시하려면 “추가 CSS”에서 입력한 CSS 코드를 삭제하고 “발행(공개)” 버튼을 클릭하면 됩니다. 이로써 워드프레스 블로그 GeneratePress 테마에서 모바일 메뉴를 숨기는 방법에 대해 알아보았습니다.