티스토리 오디세이 스킨 '상단 메뉴바' 고정하기

블로그 상단에 메뉴들을 모아 고정함으로써 스크롤을 내려도 상단에 위치할 수 있도록 해보겠습니다.

이번엔 상단 메뉴바 만들기 중 2단계인데요. 저번 1단계 글에선 메뉴바를 만들었고, 이번 2단계에선 고정하는 작업을 합니다. 그래서 사이드바가 2단계인 형식에서도 상단에 일렬로 만들어 고정시키는 걸 하고자 만든 거라서, 제가 고정했던 것들을 쓰게 되니까 이번 글 작업을 하려면 1단계 작업도 되어있어야 합니다.

imheroim.tistory.com/70

티스토리 오디세이 스킨 '상단 메뉴바' 만들기(2단도)

일반적인 오디세이 스킨에서는 사이드바 1단일때만 고정작업이 가능한데 혹시나 그걸 찾는 분은 다음분의 글을 찾아가 주세요.

alikong.tistory.com/61

Odyssey 오디세이 스킨 - 상단 메뉴 고정

 

티스토리 오디세이 스킨 '상단 메뉴바' 고정하기 

 

안녕하세요 사람사물상황입니다.

상단 메뉴바 고정은 공간을 차지하기 때문에 득과 실이 있을 수 있지만, 제가 생각할 때는 득이 높은 것 같아서 사실 제가 원하던 모습입니다. 스크롤을 내리면 다음 컨텐츠로 이어지는 것에 무언가 필요한데, 방금 봤던 글에 대한 관심사가 같은 것들이 있다면, 그것들이 모인 곳을 바로 가게 해주는 , 상단 메뉴바를 운영하는 게 분명 도움이 될 것이라 생각하기 때문입니다.

 

방법은 1단계 작업을 했다고 생각하고 2단계에서는 고정과 위치 수정을 합니다.

 

상단 고정하기
css719 해더고정하고 백그라운드 화이트넣음

.header {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #efefef;
    z-index: 10;
    transition: top 0.2s ease-in-out;

.header {
    position: fixed;
    width: 100%;
    border-bottom: 1px solid #efefef;
    z-index: 10;
    transition: top 0.2s ease-in-out;
    background: white;
로 변경

4156 홈화면 위 여백

#tt-body-index .main,
#tt-body-category .main,
#tt-body-search .main,
#tt-body-tag .main,
#tt-body-archive .main,
#tt-body-guestbook .main{
    padding-top: 56px;
 

    padding-top: 139px;
로 변경

4243 홈화면 모바일 여백

	#tt-body-tag .main,
	#tt-body-media .main,
	#tt-body-index .main,
	#tt-body-category .main,
	#tt-body-search .main,
	#tt-body-archive .main,
	#tt-body-guestbook .main{
		padding-top:0px;
		margin-top : 36px;


    padding-top: 51px;
    margin-top: 36px;
로 변경

466 본문화면 위 여백

#tt-body-page .main {
    padding-top: 88px;

    padding-top: 171px;
로 변경

482 본문화면 모바일 여백

@media screen and (max-width: 1060px) {
    #tt-body-page .main {
        padding-top: 25px;

    padding-top: 171px;
로 변경

바로밑에 새로만듬 / 본문화면 작은모바일 여백

@media screen and (max-width: 768px) {
    #tt-body-page .main {
        padding-top: 92px;
    }
}
를 추가
----------------------------------
1단 여백 
976 1단사용하려면 주석처리하고

.header .topnavmenu > ul {
    margin: 0;
    /* position: absolute;
    left: 50%;
    transform: translateX(-60%);
    top: -30px; */

4272 홈화면 상단 여백줌

		#tt-body-index .wrap-drawer .main,
		#tt-body-category .wrap-drawer .main,
		#tt-body-search .wrap-drawer .main,
		#tt-body-tag .wrap-drawer .main,
		#tt-body-archive .wrap-drawer .main,
		#tt-body-location .wrap-drawer .main,
		#tt-body-guestbook .wrap-drawer .main{
			padding-top: 0;

    padding-top: 73px;
로 변경    

태그는 파일로 담았습니다. 다운 받아 쓰세요.

상단 메뉴바 고정.txt

0.00MB

 

 

그럼 이렇게 글 하단에서도 계속 상단에 떠있는 메뉴바를 볼 수 있습니다.

1단계 작업을 하셨다면 그대로 쭉 다 수정하시면 되고요, 1단 사이드바를 사용할 때만 1단계 때와 마찬가지로. header. topnavmenu > ul { 를 주석 처리하거나 삭제해서 사용하시면 됩니다. 

 

저는 고정을 하면 원래 위치 값들도 고정이기 때문에 수정 안 해도 될 거라 생각했는데, 헤더를 고정하면 객체 간의 설정이 취소? 가 되는 것 같더라구요. 정렬하는 방식이 뭔가 변하는 느낌이었습니다. 그래서 번거로울 수도 있지만 위에서 처럼 몇 가지 수정을 해야 합니다.

 

상단바가 크게 느껴질 수 있는데. 오디세이 원래 느낌을 남기고 싶어서 그렇게 했습니다. 바꾼다면 css748에 .header .title-logo의 magin 부분을 만져 높이를 줄일 수 있을 것 같네요. 근데 디자인적으로 이쁘게 하려면 밑에도 줄여야 되고 폰트도 바꿔야 빡빡하게 안보일 것 같아서. 일단은 안 했습니다.

 

처음 오디세이 스킨을 살펴볼 때 이것이 구현이 안되어 있었지만 잘 적용할 수 있을 것 같았습니다. 그때는 내비게이션 바라는 태그를 따로 쓸 줄 알았고, 그건 뭔가 만들어야 돼서 제일 마지막에 만든 건데 다행히 그렇진 않았네요. 여기까지의 스킨 수정이 제가 오디세이에서 필요한 구성요소들을 다 구현한 것 같습니다. 처음엔 몸만 만들었고, 지금은 요소들을 넣었고 그다음은 꾸미거나 더 좋게 바꾸거나 하는 것들이 남았습니다. 잘 적용이 된 건지 모르겠네요. 오류 안 나고 잘 썼으면 좋겠는데. 그런데 구성요소라는 게 별거 아니고 원래 티스토리에서 기본적으로 쓰던 것들이 대부분이니 아이러니하네요. 혹시나 관심 있으신 분들에게 도움이 된 글이었으면 합니다. 

 

티스토리 오디세이 스킨 '상단 메뉴바' 고정하기 

 

끝.