스티키 헤더는 블로그 화면을 내렸을 때 기존에 설정한 헤더가 스티커처럼 화면을 따라 내려오는 기능이다. 설정이 필수는 아니지만, 방문자의 편의성을 높이는 장점은 있다. 아래는 GeneratePress의 Info 테마에서 설정 방법을 알아보자.
대시보드 – Appearance – Customize – Layout – Sticky Navigation
이렇게 이동 후 맨 위의 옵션을 Off → On으로 바꾸면 스티키 헤더 설정은 완료이다. (아래는 애니메이션 효과와 스크롤을 올릴 때만 헤더가 나오는 박스 옵션)
그런데 헤더가 투명해서 본문 내용이 비쳐 보이는데 색깔을 설정하면 해결된다.
Customize – Colors – Primary Navigation
메인 메뉴 배경색
메인 메뉴 글자색
서브 메뉴 배경색
서브 메뉴 글자색
메뉴 구성은 이렇게 되어 있고
처음에 나오는 색
호버 색 (마우스 올릴 때)
선택한 메뉴 색
앞에서부터 위의 세 영역 색을 지정해야 한다.
메인 + 서브 배경색 : #3d3d3d / #535353 / 투명
메인 + 서브 글자색 : #ffffff / #ffffff / #ff5b5b
이 블로그는 예시로 위처럼 구성했는데 하나씩 클릭해서 취향대로 설정하면 무난하다.
색깔은 설정한 대로 잘 나오는데 이번에는 화면을 내렸을 때 헤더 폭이 너무 좁은 문제를 발견했다.
방법은 영역 높이 설정에 답이 있는 것을 발견했다. 조금 전 Primary Nvigation 설정 창 왼쪽 아래를 보면 Menu / Sub Munu Item 사이즈 조절란이 있다. 이 설정은 PC, 태블릿, 모바일 모두 동일하게 혹은 기기별 원하는 숫자를 입력해야 한다.
만약 그래도 화면을 내렸을 때 헤더 폭이 좁게 나온다면 이때는 Sticky Navigation 탭으로 온 다음, 조금 전 Primary Nvigation의 Menu Item Height(높이)와 같은 숫자를 입력하면 문제가 해결될 것이다.
– Mobile Menu Label : Menu → 빈칸
– Menu Item Width : 0px
추가로 Primary Navigation 탭 모바일 버전에서 위처럼 조절하면 Menu 문자를 없애고 햄버거바와 돋보기 너비를 본문에 맞출 수 있다.
워드프레스 마스터 가이드
