헤더 메뉴바 설정: 위치·색상 변경과 본문 겹침 조정

Summary: 상단 메뉴바와 아래 콘텐츠가 겹칠 때 확인할 헤더 위치와 색상 설정을 안내합니다. 실제 한글 화면을 보며 기본 헤더, 첫 화면 전용 설정, 페이지별 우선 설정과 저장 방법을 따라 해 보세요.

상단 로고·메뉴 영역의 위치와 색상을 확인하고, 아래의 이미지·영상·슬라이더·본문과 겹치는 방식을 조정하는 안내입니다. 실제 한글 관리자 화면을 보며 기본 헤더, 첫 화면 전용 헤더, 페이지별 우선 설정을 순서대로 확인합니다.

화면 확인일: 2026년 11월 6일 · 케이테마 스타일 19 한글 관리자 기준. 설치 버전에 따라 메뉴 이름과 배치가 다를 수 있습니다.

먼저 알아두세요

헤더는 홈페이지 맨 위의 로고와 메뉴가 있는 영역입니다. 이번 안내는 영상 파일이나 Elementor 슬라이더 내용을 수정하는 작업이 아니라, 이 메뉴 영역과 본문의 배치 방식을 확인하는 작업입니다.

메뉴와 영상이 겹치지 않게 하려면 보통 기본위치-relative를 사용합니다. 다만 페이지에 별도 설정이 있으면 사용자 정의 설정보다 먼저 적용되므로, 설정을 바꾸어도 그대로일 때는 4단계를 확인하세요.

준비물: 본인 홈페이지 관리자 로그인 권한. 시작 전에 현재 선택값을 메모하거나 화면을 캡처하세요. 가능하면 연습용 복사본에서 확인하고, 다른 사람이 편집 중인 페이지는 동시에 수정하지 마세요.

1. 사용자 정의 화면 열기

헤더의 전체 설정은 헤더 설정 관련 매뉴얼도 참고해 주세요. 실제 설정은 본인 홈페이지 관리자에 로그인한 뒤 진행합니다.

1. 본인 홈페이지의 워드프레스 관리자에 로그인합니다.
2. 왼쪽 메뉴에서 모양 → 사용자 정의를 누릅니다. 일부 버전에서는 ‘모양’이 ‘외모’로 표시됩니다.

3. 사용자 정의 화면에서 헤더를 누릅니다.
4. 헤더 기본 스타일을 누릅니다.

오른쪽 미리보기가 비어 있으면 로딩이 끝날 때까지 기다립니다. 현재 상태를 확인하지 못한 채 ‘공개’를 누르지 마세요.

2. 기본 헤더 위치 확인하기

1. 왼쪽 설정 패널을 아래로 내려 헤더 위치 방식을 찾습니다.
2. 메뉴 아래에서 본문이 시작하게 하려면 기본위치-relative를 선택합니다.

주의: 일반 헤더 설정은 다른 페이지에도 영향을 줄 수 있습니다. 메인 화면만 변경하려는 경우에는 현재 일반 헤더 값을 유지하고 첫 화면 전용 설정 또는 해당 페이지의 개별 설정을 이용하세요.

3. 메인 화면 전용 설정 확인하기

1. 같은 패널의 첫 화면 전용 헤더 사용을 확인합니다. 이전 버전에는 ‘첫페이지 별도 헤더 스타일’로 표시될 수 있습니다.
2. 아니오이면 기본 헤더 설정을 따릅니다. 단, 4단계의 페이지별 설정이 있으면 그 설정이 우선합니다.
3. 예이면 [첫페이지] 헤더포지션을 찾아 기본위치-relative로 선택합니다. 항목이 위쪽에 있을 수 있으므로 패널을 위로 올려 보세요.

전용 설정을 새로 켜면 위치뿐 아니라 전용 색상 설정도 함께 적용될 수 있습니다. 로고와 메뉴 글자가 배경에 묻히지 않는지도 확인하세요.

메뉴 글자색과 배경색도 함께 바꾸기

1. 기본 헤더를 수정할 때는 위 캡처의 헤더 텍스트 색상을 확인합니다. 밝은 배경에는 검정색, 어두운 배경에는 흰색을 선택합니다.
2. 영상 위에 비치는 투명 메뉴가 아니라 독립된 배경을 원한다면 헤더 배경 방식 → 색상배경을 선택하고 헤더 배경 색상 → 색상 선택에서 색을 지정합니다.
3. 첫 화면 전용 설정을 사용한다면 [첫페이지] 텍스트 색상과 [첫페이지] 헤더영역 배경색상 종류도 확인합니다. 일반 헤더 색상만 바꾸고 끝내지 마세요.
4. 페이지별 색상 설정이 따로 있으면 다음 단계의 헤더 배경·헤더 글자색이 우선할 수 있습니다. 로고 이미지의 색상은 메뉴 글자색과 별개이므로 로고도 잘 보이는지 확인합니다.

4. 바꾸어도 그대로라면: 페이지별 설정 확인하기

케이테마 랜딩 페이지에는 해당 페이지에서만 사용하는 헤더 설정이 있습니다. 페이지별로 지정한 값이 사용자 정의 설정보다 우선합니다.

1. 사용자 정의에서 바꾼 내용을 적용할지 먼저 결정합니다. 적용할 내용이면 미리보기 확인 후 ‘공개’로 저장하고, 시험한 내용이면 원래 값으로 돌리거나 저장하지 않고 종료합니다.
2. 관리자의 페이지 → 모든 페이지로 이동합니다.
3. 메인 화면으로 사용하는 페이지를 찾습니다. 이름은 ‘홈’, ‘메인’ 등 사이트마다 다릅니다. 모르면 설정 → 읽기 → 홈페이지 표시에서 지정된 페이지를 확인합니다. 여기서 다른 홈페이지로 변경하지는 마세요.
4. 해당 페이지의 편집을 누릅니다. 이번 설정은 ‘Elementor로 편집’이 아니라 일반 페이지 편집 화면에서 확인합니다.

5. 편집 화면의 KTheme 랜딩 페이지 설정 상자를 찾습니다. 화면 오른쪽 아래에 있어 아래로 내려야 보일 수 있습니다.
6. 헤더 위치가 ‘상단 고정’ 또는 ‘상단 오버레이’로 지정되어 있는지 확인합니다.
7. 이 페이지에서 메뉴 아래에 본문을 배치하려면 기본 위치를 선택합니다. 사용자 정의 설정을 따르게 하려면 기본값을 선택합니다.

이 설정 상자가 없다면 설치된 테마 버전이나 페이지 형식이 다를 수 있습니다. 상자를 표시하려고 페이지 템플릿을 임의로 바꾸지 마세요. 현재 화면을 캡처해 문의해 주세요.

5. 저장하고 실제 화면 확인하기

사용자 정의에서 변경한 내용은 위쪽 공개 버튼으로 저장합니다. ‘발행됨’으로 표시되고 버튼이 비활성 상태라면 저장할 변경이 없는 상태입니다. 페이지 편집 화면에서 변경한 내용은 오른쪽 위의 업데이트로 저장합니다. 두 화면은 저장 위치가 다릅니다.

1. 실제 홈페이지를 새 탭으로 열고 새로고침합니다.
2. 페이지 맨 위에서 메뉴 영역과 영상 시작점이 겹치지 않는지 확인합니다.
3. PC와 실제 휴대전화에서 각각 메뉴, 로고, 영상, 메뉴 열기를 확인합니다.
4. 스크롤을 내렸을 때도 확인합니다. 스티키 헤더가 켜져 있으면 맨 위에서의 배치와 스크롤 이후의 동작은 다를 수 있습니다.

자주 막히는 부분

relative로 되어 있는데도 영상과 겹쳐요.

먼저 페이지별 ‘헤더 위치’가 따로 지정되어 있는지 확인하세요. 페이지별 설정도 맞는데 그대로라면 풀페이지 스크롤이나 페이지에 적용된 별도 스타일을 확인해야 합니다. 슬라이더 여백을 크게 늘리거나 임의의 CSS를 추가하기 전에 지원을 요청하세요.

스타일 19처럼 화면이 한 장씩 넘어가는 페이지도 같나요?

풀페이지 스크롤을 사용하는 페이지는 첫 화면 높이와 이동 위치도 함께 확인해야 합니다. 헤더 위치만 바꾸면 모든 페이지에서 동일한 결과가 나온다고 단정할 수 없습니다. ‘페이지 스크롤’을 임의로 바꾸면 스크롤 방식 자체가 달라지므로 이 안내에서는 변경하지 않습니다.

메뉴 글자가 안 보이거나 배경이 이상해요.

투명 헤더를 영상과 분리하면 메뉴 뒤의 배경이 달라질 수 있습니다. 적용 중인 헤더 배경과 글자색을 함께 확인하세요. 밝은 배경에는 어두운 글자, 어두운 배경에는 밝은 글자를 사용합니다. 페이지별 글자색이나 섹션별 색상 설정이 있으면 그것도 우선 적용될 수 있습니다.

변경 전으로 되돌리고 싶어요.

처음 기록한 설정값으로 돌린 뒤 해당 화면의 저장 버튼을 누릅니다. ‘기본값’ 선택은 이전 설정 복구와 같은 뜻이 아닙니다.

문의할 때 함께 보내 주세요

문제가 보이는 페이지 주소, PC 또는 모바일 여부, 사용자 정의의 헤더 위치와 첫 화면 전용 설정 캡처, 페이지별 헤더 위치 캡처를 보내 주세요. 계정 비밀번호와 개인정보는 캡처에 넣지 마세요.