[CSS] 티스토리 Poster 스킨 메뉴바 고정하기

 

📝 Poster 스킨 수정사항

✔︎ 메뉴 버튼을 고정한다.

✔︎ 메뉴바 자체를 고정한다.

 

 

 

✰ 메뉴 버튼 고정

스크롤을 내려 블로그의 하단으로 도달하면 메뉴 버튼이 사라져서 다시 맨 위로 올라가서 메뉴 버튼을 클릭해야 하는 불편함이 있다.

이를 해결하기 위해 메뉴 버튼을 고정해보자.

 

 

CSS #header .mobile-menu 를 검색해서 찾고 position을 absolute → fixed 로 수정해준다.

 

 

 

수정전

 

 

수정후

 

 

 

 

✰ 메뉴바 고정

메뉴바를 고정시키면 수시로 메뉴 버튼을 클릭하지 않아도 카테고리를 확인할 수 있는 편리함이 있다.

기존에 메뉴 버튼을 누르면 슬라이드로 보여지는 메뉴바를 고정시켜보자.

 

 

☝🏻 메뉴바 고정을 위해 코드를 추가해준다.

/* 스킨 수정: 좌측 카테고리 고정 처리 */
@media (min-width: 1400px) {
#header .menu {
  left: 0px;
  }
#header .menu.on {
  left: -300px;
  }
}
/* 스킨 수정 끝 */

 

 

 

 

✌🏻 메뉴바를 열었을 때 음영 처리되는 코드를 주석처리해준다.

     CSS에서 #dimmend를 찾아 /*와 */로 감싸준다.

 

 

 

 

메뉴바 고정은 성공! 그러나...홈 화면을 보니 메뉴바가 작성글 제목을 가려버렸다😅 메뉴바의 가로 면적을 조절해주자!

 

 

 

 

🤟🏻 메뉴바의 너비를 조절해준다.

CSS #header .menu 를 검색해서 찾아 width를 348px → 300px 로 수정해준다.

 

 

 

 

메뉴바가 적절하게 줄여져 이제 메뉴바 고정에도 작성글 제목이 잘 보인다 🥳

 

 

 

 

 

참고 자료⎜https://investox.tistory.com/m/7