마크쿼리 - 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 버전도 참~~ 좋은 반응형 스킨입니다.
Comments