fastboot 스킨 고정된 상단바 해제 방법

대부분의 티스토리 반응형 스킨을 보면, 데스크탑, 모바일 페이지 모두 블로그 이름, 메뉴와 검색창이 포함된 상단바가 스킨 제일 윗부분에 무조건 고정되어 있다.

 

'fastboot' 스킨도 마찬가지다. 물론 방문자들에게 내 블로그의 이름을 각인(?) 시킨다는 점과 스크롤을 내리며 검색창을 이용할 수 있다는 장점은 분명이 있다.

 

하지만.. 남들과 똑같은 이런 '고정'된 위치가 싫다면 과감히 고정을 해제시키면 된다.

 

최근에 변경한 '로렌과 오뚜막' 블로그의 상단바 부분이다. 폭이 넓은 데스크탑에서 보면, 원래는 저렇게 높이가 뚜꺼운 상단바가 제일 먼저 보인다.

 

그 상태에서 스크롤을 살짝 내리면 위와 같이 높이가 줄어들면서 상단바가 계속 그 자리에 머물러 있다.

 

모바일 페이지로 접근하면 처음부터 계속 상단바가 그대로 고정되어 있다. 이런 구조가 깔끔해서 좋다고 생각하는 사람들도 많은데.. 싫으면 과감히 고정된 부위를 해제하라고 권하고 싶다.

 

먼저, fastboot 스킨의 '모바일' 상단 고정바가 html이나 css의 어느 부분에 있는지 확인해보자.

 

모바일의 경우, fastboot.css라는 파일 내부를 수정한 다음에 다시 업로드해야 하는 번거로움이 있다. 구글 크롬의 요소 검사가 상당한 도움을 준다. 

 

styles 항목에서 'navbar-fixed-top'과 'navbar'를 찾았다면 우측에 보이는 'fastboot.css:11'를 클릭해서 'sources'을 열고 내부 수정을 하면 된다.

'position : fixed'는 삭제~ 'z-index'는 0으로 수정~ 'margin-bottom'은 0px로 수정~

 

수정된 fastboot.css 파일은 마우스 오른쪽 클릭 메뉴를 통해서 컴퓨터에 저장하면 된다.

 

fastboot 스킨 고정된 상단바 해제 방법

 

 

티스토리 스킨의 '파일업로드' 화면에서 기존의 fastboot.css를 삭제하고 곧바로 수정된 fastboot.css파일을 추가해야 한다.

 

여기까지가 fastboot 스킨의 모바일 상단바 고정 해제 방법이고, 다음은 데스크탑에서 상단바를 고정 해제시키는 방법이다.

 

티스토리 스킨 css 편집화면이다. desktopnav의 'height'를 50px으로 바꿔준다. (모바일 페이지의 상단바와 높이를 똑같이 맞추는 과정)

 

그리고 desktopnav안에 있는 'navmiddle'에서 'padding-top'을 0px로 수정!

 

body. navfixed의 'padding-top'도 0px로 수정~ 그 바로 밑의 navfixed도 0px로 수정한다. 

 

desktopnav. fixed 항목에서는 'position:fixed'를 삭제하고 width를 제외한 모든 수치를 0으로 변경해주면 됨~

 

마지막으로, 위 화면상에 보이는 저 부분도 0px로 변경해야만 데스크탑 상단바 윗부분에 여백이 생기지 않게 된다.

 

이렇게 fastboot 스킨의 고정된 상단바를 모두 해제 시키면.. 데스크탑 페이지에서는 위와 같은 모습을 확인할 수 있고..

 

모바일 페이지에서는 기존 모습 그대로를 유지하면서 '고정'만 해제된 모습을 확인할 수 있다. 이렇게 바꿔주니 상단바의 높이가 변함이 없기 때문에.. 오히려 훨씬 깔끔해졌다는 느낌이 든다.

 

✅티스토리 웹반응형 스킨 'fastboot' 다운로드와 적용기

티스토리 웹반응형 스킨 'fastboot' 다운로드와 적용기

✅내 맘대로 심플하게 바꾼 'fastboot'스킨

내 맘대로 심플하게 바꾼 'fastboot'스킨

✅fastboot 스킨 '인용구' 색깔, 글씨 변경하기

fastboot 스킨 '인용구' 색깔, 글씨 변경하기