본문 바로가기

블로그 관련 정보/블로그 꾸미기

마크쿼리 - Spider’s Web 반응형 스킨 상단 메뉴 고정하기

마크쿼리 - Spider’s Web 반응형 스킨 상단 메뉴 고정하기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

마크쿼리 - Spider’s Web 반응형 스킨 상단 메뉴(네비게이션)을 고정하는 방법을 알아보겠습니다.

 

상단 메뉴를 고정하면 마우스 스크롤시 항상 상단에 메뉴가 떠있게 되는데 이렇게 해서 사용자에게 편리한 메뉴이동을 제공해 줄수 있습니다.

 

상단 메뉴를 고정하는 방법이 어렵지 안으니 필요하신다면 쉽게 적용이 가능합니다.

 

Spider’s Web 반응형 스킨 상단 메뉴(네비게이션) 고정하기

 

방법은 간단하지만 혹시 모를 실수로 사용하는 스킨에 문제가 발생할수 있으니 꼭 저장하시고 작업을 시작하세요.

 

 

상단 메뉴란 위 이미지 박스친 부분을 말합니다. 수정을 위해 티스토리 관리-> HTML/CSS 편집을 선택하고 Ctrl + F키를 눌러 찾기창을 열어 주세요.

 

Ctrl + F키를 눌러 찾기창이 열리면 '<header role="banner" '을 검색하세요.

 

그럼 딱 한군데  <header role="banner" class="container skeleton-nav">나오는데 맨 끝에 ' nav-fixed '을 추가해 주세요.

 

수정 전

 

소스 수정 후 입니다.

 

찾기창에 padding-top: 50px;을 입력하시면 'style.css'에 한군데 나오는데 주석( /* */ )을 삭제해 주세요.

 

수정전

 

수정 후

 

찾기 에  /* Small devices 을 입력하면 한군데 나오는데 /* body { padding-top: 0; } */ 부분의 주석 을 삭제하면 됩니다.

 

수정 전

 

수정 후 입니다.

 

이렇게 해 주시고 '저장'을 눌러서 확인해 보시면 상단 메뉴(네비게이션)이 스크롤시 상단에 떠 있는것을 확인 하실수 있습니다.

 

 

제가 테스트 블로그에 직접 적용해 확인한 화면 입니다. 스크롤시 상단 메뉴가 떠 있는것을 확인할수 있습니다.

 

마크쿼리스킨이 워낙 깔끔하고 좋아서 원하시는 디자인으로 수정해 사용한다면 오랜시간 사용이 가능한 반응형 스킨입니다.

 

버전업이 되면 어떠한 모습, 기능이 나올지 모르지만 현재 사용하는 3.0.5 버전도 참~~ 좋은 반응형 스킨입니다.

  • 감사합니다 덕분에 더욱 좋은 블로그를 만들 수 있겠네요. ㅠㅠ

  • 혹시.. 질문좀 해도 될까요? ㅜ.ㅜ 제가 마크쿼리님에 반응형 스킨을 쓰고있는데 블로그 제목 색상을 변경하는 방법을 찾는 도중에 여기 들어와 상단고정하는법도 배워가네요. 블로그 제목 색상 변경하는 곳이 어딘지 ㅜ_ㅜ 찾을수가 없어 이렇게 글을 남깁니다. 알고계시다면 부디 알려주세요 ㅠ^ㅠ

    • 안녕하세요.
      마크쿼리님 스킨에 관한 자세한 부분은 마크쿼리님 홈페이지에 가셔서 질문,답변란을 이용해 보시는게 빠를듯 합니다.^^

      마크쿼리스킨이 조만간 업데이트될거라 합니다.

      많은 부분 바뀌고 새로운 컬러의 스킨도 추가된다고하니 한번 방문해 보세요.^^