헤더 영역에 사이트 이름과 카테고리, 공지 사항, SNS 아이콘 등을 설정하면 방문자는 사이트 내 메뉴를 직관적으로 알 수 있어서 좋다. 만약 방문자의 편의성을 더 높이려면 화면을 내렸을 때 헤더 영역을 화면에 고정하는 방법을 사용할 수 있다.
워드프레스에 GeneratePress 테마를 적용 중이면 해당 기능을 쉽게 설정할 수 있다. 화면 영역이 줄어드는 건 단점이겠지만, 방문자 편의성 면에서 장점이 있으니 블로그 운영 방향 등에 따라 설정하면 무난하다.
* GeneratePress 테마 프리미엄 버전에서 적용될 수 있습니다.
1. 스티키 네비게이션 설정
테마 적용 후 따로 설정하지 않으면 화면을 내렸을 때 위처럼 헤더 영역이 사라진다. 헤더 고정 설정을 위해서는 대시보드 – Layout – Sticky Navigation으로 이동하자.
– Sticky Navigation : 기본 옵션은 Off로 되어 있을 텐데, On으로 변경하면 모든 기기에서 적용된다. 모바일, PC 버전 따로 설정이 필요하면 Mobile Only / Desktop Only 중 원하는 옵션을 선택하면 된다.
– Transition : 헤더 네비게이션이 나타나는 애니메이션 효과를 설정할 수 있다. (Fade/Slide/None)
– Hide when scrolling down : 박스를 체크하면 스크롤을 내릴 때 헤더가 사라졌다가 올릴 때 나오게 된다.
– Menu Item Height : 헤더 네이게이션 높이 조정
그런데 여기까지만 설정하면 헤더 영역에 카테고리 목록(모바일은 햄버거 바 ☰)만 나오게 된다. 원래 설정해둔 블로그 헤더를 그대로 나오게 하려면 아래 추가 설정이 필요하다.
2. 원래 설정한 헤더 고정
Customize 첫 화면에서 Layout – Header로 온 다음, ‘Use Navigation as Header’박스를 체크하면, 원래 헤더가 네비게이션 헤더로 바뀌는 것을 볼 수 있다.
3. 검색 돋보기 설정
블로그 로고와 카테고리 메뉴만 있어서 허전하다면 검색 돋보기 아이콘을 추가할 수 있다. Cusomize 첫 화면 – Layout – Primary Navigation으로 온 다음 아래 버튼을 체크하면 된다.
– Enable navigation search modal
박스를 체크하면 헤더에 돋보기가 나타나고 검색어 입력 시 관련 콘텐츠가 나온다.
4. 스티키 헤더 디자인
기본 설정을 마친 뒤 헤더 색깔과 글자 디자인을 하려면 Customize 첫 화면으로 온 다음 각각 Colors와 Typography로 이동 후 진행하면 된다.
* Colors – Primary Navigation에서 설정
* Typography – Typography Manager – Add Typography – Target Element를 Primary Menu Item 선택 후 설정
