티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS)

▤ 목차

북클럽 스킨 상단 메뉴 고정하기(CSS)

티스토리 블로그 북클럽 스킨에서 상단 메뉴 고정 방법에 대해 포스팅한 많은 글이 있는데, 간단하게 구현하는 방법을 공유합니다. 

수정 방법은 CSS에서 #header, #aside, #dimmed 세 부분만 수정하면 되는 간단한 작업입니다. 

 

항상 그렇듯 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '상단 메뉴 고정하기'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다.

 

북클럽 스킨 

상단 메뉴 고정하기

1. '블로그관리의 꾸미기 > ①스킨 편집 > ②html 편집 > ③CSS'로 들어갑니다.

 

---

 

CSS코드 수정 

1. 헤더 부분 수정 : #header

css탭에서 Chift + F를 이용해  #header를 검색합니다. (118~120번째 줄)

#header

 

#header { border-bottom: 1px solid #eee; } 코드를 아래의 코드로 변경해 줍니다.

기존 코드는 삭제하지 않고 /* .. */으로 숨김 처리한 코드입니다.

/*
#header {
	border-bottom: 1px solid #eee;
}
*/
/* 헤더고정 */
#header {
	z-index:1010; 
	background-color:rgba(255,255,255,0.95); /* 배경 투명도 */
	box-sizing:border-box; 
	position:sticky; 
	position:-webkit-sticky; 
	top:0; 
	border-bottom: 1px solid #e4e6e8; /* 상단메뉴 하단 구분선 */
}
/* 헤더고정 끝 */

728x90

 

CSS코드 수정 

2. 모바일 사이드바 탭 수정 : #aside

header만 고정하면 모바일에서 사이드바 탭을 열었을 때 사이드바가 헤더 밑에 깔리는 문제가 발생합니다. 

이를 해결하기 위해, CSS의 #aside 코드에서 'z-index:400;'을 'z-index:1030'으로 바궈줍니다.

사이드바를 열었을 때 사이드바가 상단메뉴 위로 뜨게 Z 축 상의 위치를 끌어올려주는 작업입니다.

 

#aside

 

z-index: 1030; /* 400 */

---

 

CSS코드 수정 

3. 모바일 사이드바 탭을 띄울 때 어두워지는 부분 수정 : #dimmed

마지막으로 #dimmed부분의 'z-index'를 'z-index:1020'으로 바꾸어서 모바일에서 사이드바 탭을 띄웠을 때 상단메뉴도 같이 어두워지도록 Z 축을 조정해 줍니다.

즉, Z축을 1000보다 높은 숫자들로 조정하되, 숫자 크기가 #aside > #dimmed > #header 순으로 작아지게 조정하면 됩니다.

 

#dimmed

 

z-index: 1020; /* 300 */

728x90

관련글

[▸ 티스토리 꾸미기] - 블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨

블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨

[▸ 티스토리 꾸미기] - 티스토리 북클럽 스킨 I 상단 메뉴 삭제하기

티스토리 북클럽 스킨 I 상단 메뉴 삭제하기

마무리

이렇게 간단하게 북클럽 스킨 상단 메뉴 고정에 대해서 알아봤습니다.

블로그 관리에 접속하면 상단 메뉴가 고정되어 있는 게 신기하고, 또 따라 해보고 싶은 마음에 검색을 해보니 많은 글들이 올라와 있어 생각보다 쉽게 작업을 끝낼 수 있었습니다.

 

저는 상단메뉴에 메뉴들이 없지만 상단에 메뉴가 있는 블로그들은 상단에 고정된 메뉴를 통해 쉽게 이동이 가능하니, 아무래도 방문하신 분들의 체류시간 증가와 이탈률 감소를 기대해 볼 수 있지 않을까 합니다.  이상 끝!!

 

참고한 블로그 : 티스토리 블로그 북클럽 스킨 상단메뉴 부분 고정하기(CSS) (tistory.com)

 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"