구글 블로그 고정 헤더 (sticky header) 제거 (스크롤을 내렸다가 올리면 나타남)

블로그를 시작하고 시간이 흐르면 자신의 기호대로 커스터마이징하고 싶은 부분들이 점점 눈에 보이게 됩니다. 그 중에 하나! 구글 블로그에서 스크롤을 내렸다가 올리면 나타나는 고정 헤더(sticky header)를 제거하는·없애는 방법을 소개합니다.

저의 경우에는 고정 헤더를 제거하기 위해 우선 구글 검색을 하였습니다. '한국어 웹'에는 정보가 없었고 영어권에서 한 가지 찾을 수 있었는데 적용해서 테스트를 해보니 생각지도 못한 부분에서 또 다른 버그가 나와서 사용할 수 없었습니다.

결국 직접 이런저런 코드를 넣어 테스트해 보다가 찾은 좋은 방법👍이 있어 공유하고자 글로 남깁니다. 이런 주제의 글을 찾는 분은 소수일 거라 생각하지만 조금의 도움이 되었으면 합니다🔥

아래의 CSS 코드를 적용하면 고정 헤더(sticky header)를 제거할 수 있습니다.

/* 고정 헤더 제거 */
.centered-top-container.sticky > .centered-top {
  display: none;
}

/* ※블로그 테마가 Contempo인 경우 추가한다 */
body.collapsed-header .sidebar-container {
  z-index: 32;
}

구블 블로그에 CSS 코드를 어떻게 추가하는지 모른다면 「구글 블로그 CSS 코드 추가 / 변경」의 내용을 참고하세요.

구글 블로그 CSS 코드 추가 / 변경 고정 헤더가 제거된 테스트 블로그