헤더 높이를 올바르게 늘리는 방법은?

지원
1

안녕하세요,
헤더 높이를 늘리고 싶습니다:
image
더 큰 로고를 표시하기 위해서입니다(모바일에서는 헤더 높이가 기본값으로 유지되어야 합니다).

여러 시도를 해봤지만, 높이를 늘리면(헤더가 증가된 높이로 콘텐츠를 덮지 않도록 하단 콘텐츠의 상단 여백도 함께 늘려야 하지만) 스티키 기능이 제대로 동작하지 않는 문제가 발생했습니다. 스크롤이 불가능해지거나 콘텐츠가 "점프"하는 현상이 나타났습니다.

무언가 깨지지 않고 헤더 높이를 늘릴 수 있는 적절한 방법이 있을까요?

2

아래와 같이 조정해 보셨나요?

#main-outlet {
    padding-top: 5.8572em;
}

예를 들어

.d-header {
    height: 8em;
}
#main-outlet {
    padding-top: 9.8572em;
}

844×427 13.8 KB

836×377 16 KB

3

네, 했습니다. 헤더 높이를 원래 높이의 약 2배로 만들고, 스티키 상태에서는 기본 높이를 유지하길 원한다는 점을 추가로 말씀드리고 싶습니다. (이 부분이 주요 문제일 수 있습니다.)

4

결국 해냈습니다.
왜 그렇게 막히는 문제가 생겼는지는 잘 모르겠네요… 여전히 약간 점프하는 현상이 있지만, 픽셀 몇 개 정도라서 아주 천천히 스크롤해서 의도적으로 보려고 하지 않는 한 눈에 띄지 않습니다.
또한 헤더 위에 커스텀 콘텐츠를 추가해 두었기 때문에, 제가 겪은 문제에 그 부분도 영향을 미쳤을 수 있습니다.