본문 바로가기

Blog/블로그 이야기

최신버전 마크쿼리 웹반응형 티스토리 스킨 상단메뉴 고정 방법 따라만해도 할수있다?

마크쿼리 티스토리 반응형스킨 상단메뉴 고정
최신 버전은 마크쿼리 반응형 티스토리스킨은 상단고정을 제공을안한다고하지만....
고정해서 쓰고싶은 사람이 많은걸루 알고있습니다.
그래서인지 마크쿼리님이 스킨안에 숨겨놓은거같습니다.
잠깐만 투자하면 지금 제블로그 처럼 상단메뉴 고정시킬수있어요
고치는데 예상시간 1분도안걸립니다.

상단메뉴 고정 방법

스파이드웹(Spider’s Web) 상단부분 수정전



스파이드웹(Spider’s Web) 상단부분 수정전 메뉴가 안움직임

스파이드웹(Spider’s Web) 하단부분 수정전



스파이드웹(Spider’s Web) 하단부분 수정전 하단에 봣을때 페이지 상단에 메뉴가 없어요

<header role="banner" class="container skeleton-nav">


우선 HTML 부분에서 위에 부분을 찾으세요
컨트롤 + F 로 찾으시면 편하실꺼에요 ?
<header role="banner" class="container skeleton-nav nav-fixed">


찾으시고나서 skeleton-nav 뒤에 한칸뛰우고 nav-fixed 추가 하시면되요.
그리고 다음 CSS부분 수정하면되요

/* style
-------------------------------------------------- */
body {
  position: relative; /* For scrollyspy */
  /* padding-top: 50px; */  /*Account for fixed navbar */


body 부분을 찾아서 /* padding-top: 50px; */ 부분을 주석을 삭제하면되요

padding-top: 50px;  /*Account for fixed navbar */


이렇게 하시고 다음은...

/* Small devices < 768px
------------------------- */
@media screen and (max-width: 767px) {
  /* Remove any padding from the body */
  /* body { padding-top: 0; } */
이부분을 찾아서 /* body { padding-top: 0; } */ 이부분의 주석을 삭제

body { padding-top: 0; }


스파이드웹(Spider’s Web) 하단부분 수정 후



스파이드웹(Spider’s Web) 하단부분 이렇게 수정하시고 스킨 저장하기 하시고 확인하시면 상단에 메뉴바가 고정되서 따라오게 됩니다.
그리고 Doo Be Doo 스킨도 안에 숨겨놓은거 있더라구요
방법은 같으니 마크쿼리 웹반응형 티스토리 스킨 상단메뉴 고정하고싶은분 한번해보세요 ^^
1분이면됩니다.
Plus

이제 저도 다른부분을 더수정하고싶은데 갑자기 어떻게해야될지...
갑자기 머리가 안돌아가네요 ㅎㅎ