따라다니는 플로팅 고정 사이드바 설정|ASTRA Theme

아스트라 테마를 사용중이라면 추가 CSS를 입력하여 어렵지 않게 사이드바를 고정시키고, 따라다니는 플로팅 메뉴를 구성할 수 있습니다. 플러그인을 사용하여 사이드바를 고정시켜 따라다니는 플로팅 메뉴를 구성해도되지만 플러그인 설치가 부담스러우신분들은 아래 방법을 참고하여 아스트라 테마에서 사이드바를 고정해보세요.

워드프레스 테마 사용자 정의

01. 워드프레스 테마 사용자 정의

워드프레스 메뉴에서 [테마 디자인] ▶ [사용자 정의] 메뉴로 이동합니다.

추가 CSS 입력하기

02. 추가 CSS 입력하기

[사용자 정의] 메뉴 중 [추가 CSS]를 선택합니다.

플로팅 메뉴를 위한 Sticky Sidebar CSS 추가

03. 플로팅 메뉴를 위한 Sticky Sidebar CSS 추가

추가 CSS 부분에 사이드바 고정을 위해 아래와 같은 CSS 코드를 작성합니다.
(/../ 부분은 해당 CSS 코드가 어떤 기능을 하는지 기억하기 위한 설명을 위해 주석 처리하였습니다.)

/**************
 sticky-sidebar
 **************/
@media screen and (min-width: 769px) {
#secondary {
    position: sticky;
    position: -webkit-sticky;
    top: 6px; }
}

코드 입력이 끝났다면 변경된 사항을 적용하기 위해 상단 [공개] 버튼을 클릭하여 저장합니다.

사이드바 상세 디자인

04. 사이드바 상세 디자인

웹사이트로 이동하여 사이드바 고정 기능이 정상적으로 작동하는지 확인합니다. 플로팅 사이드바의 상단 공간이 너무 넓거나 좁은 경우 CSS 코드 중 top의 숫자값을 변경하여 공간의 높이를 설정할 수 있습니다.

댓글 남기기

이메일은 공개되지 않습니다.