본문 바로가기

Blog/티스토리스킨

원소스 멀티플레이 스킨 SpiderWeb 상단 내비게이션 고정하기 숨겨진 방법?

마크쿼리 웹 반응형 스킨 상단 메뉴 두 개 오른쪽 정렬

Spider’s Web 3.0.5 기준으로 작성했습니다.

최신 버전은 마크쿼리 티스토리 스킨은 상단 고정을 제공을 안 한다고 하지만 마크쿼리님이 스킨 안에 숨겨두어서 잠깐만 투자하면 지금 제 블로그처럼 상단 메뉴 고정시킬 수 있어요.
수정하는데 예상시간은 길어야 5분...
찾기만 하면 위치에 한가지 추가와 삭제를 하면 끝!!!

마크쿼리님 스킨 Spider’s Web, Doo Be Doo 둘다 적용가능 합니다.
상단의 내비게이션을 고정해서 스크롤 되면 고정되어있어서 계속 보이게 되는 겁니다.


상단메뉴고정



<header role="banner" class="container skeleton-nav">
	<nav id="menu" class="nav" role="navigation" aria-label="Main Navigation">
		<a rel="home" href="https://blog-pleur.tistory.com/" class="nav-brand">삐뚤어질테다</a>
		<ul role="menubar">
		<li role="menuitem" aria-haspopup="true"><a href="/category">Category</a>
			<ul role="menu">


<header role="banner" class="container skeleton-nav"> 부분을 찾아서 nav-fixed를 추가.


수정후
<header role="banner" class="container skeleton-nav nav-fixed">


수정 전

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

/* style 부분에 body 클래스 부분에 주석으로 처리된 /* padding-top: 50px; */ 부분을 주석 삭제.


수정 후

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

padding-top: 50px; 부분에 50px 수치를 변경하면 padding이 여백 지정하는 거니까 본문 영역이랑 쉽게 떨어지는 걸 확인할 수 있을 거예요.
저는 그래서 조금 띄워서 지금처럼 보이게 만들었어요


수정 전

/* Small devices < 768px
------------------------- */
@media screen and (max-width: 767px) {
  /* Remove any padding from the body */
  /* body { padding-top: 0; } */

/* Small devices 부분에 찾아서 주석으로 처리된 /* body { padding-top: 0; } */ 부분을 주석 삭제.


수정 후

/* Small devices < 768px
------------------------- */
@media screen and (max-width: 767px) {
  /* Remove any padding from the body */
  body { padding-top: 0; }

이 부분도 역시 padding이 여백이니까 모바일로 변하면 왼쪽 위에 생기는 아이콘 모양이랑 본문 영역이랑 여백을 설정할 수 있습니다.


수정완료


Plus

정리해보면

이전 블로그에서 N사에 칼질당하고 ㅎㅎ
스킨 꾸미면서 다른 방법? 비슷한 방법으로 바꾸다가 찾은 방법입니다.
제공안 하신다면서 숨겨두신 마크쿼리님 ㅎㅎ 감사해요'';;

제목을 자꾸 마크쿼리 반응형 이런 식으로 하니...
네이버에 검색 반영 시간이 늦어지니 이제 다른 키워드를 점써야되겟네요 -0-