GeneratePress 테마에서 헤더 메뉴를 적용하면 영역 내 콘텐츠 너비가 바로 아래 나오는 본문 영역 전체 너비보다 좁게 나오는데, 테마 내 설정으로 간단하게 해결할 수 있는 방법을 정리하였다.
* GeneratePress 프리미엄 버전에서 적용될 수 있습니다.
예로 이 블로그 헤더에 넣은 블로그 로고와 이름, 카테고리, 검색 돋보기를 보면 전체 너비가 본문 폭보다 좁은 모습을 볼 수 있다.
이 상태에서 메인 카테고리를 추가하면 자동 줄 바꿈은 일어나지만, 지금의 헤더 폭에는 변화가 없다.
헤더 내 콘텐츠 폭은
대시보드 – Appearance – Customize – Layout – Container로 와서 아래 Content Padding 숫자를 조정하면 된다.
개발자 도구로 헤더를 검사해 보니 좌우 50px 값이 있었는데 이걸 0으로 하면 된다. 하지만 이 숫자를 조정하면 본문 폭도 같이 적용되서 그냥 두는 것이 좋다. (블로그 전체 디자인에 따라 다를 수 있음)
대신 숫자 위 Container Alignment를 기존의 Text → Boxes로 변경하면 숫자 조정 없이 헤더 메뉴 좌우 폭을 본문 박스 영역과 똑같이 맞출 수 있다.
만약 다른 테마를 사용 중이거나 GeneratePress 무료 버전에 해당 기능이 없다면, 헤더 영역 개발자 검사 후 CSS로 margin 값을 조절하면 된다.
참고로 헤더 영역은 블로그 전체 너비인데 콘텐츠만 본문 영역에 맞추려면 아래처럼 설정하자.
1. Layout – Header – Use Navigation as Header 박스 체크
2. Primary Navigation으로 온 다음,
– Navigation Width : Full
– Inner Navigation Width : Contained
워드프레스 마스터 가이드
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
워드프레스 꼭 유료 테마를 선택해야 할까
GeneratePress 유료 버전 (프리미엄) 설치 방법
