GeneratePress 테마 헤더, 메뉴 고정하기(sticky menu)

GeneratePress 테마 헤더, 메뉴 고정하기

플러그인을 이용하는 방법

 

• 플러그인 추가에서 sticky만 검색해도 다양한 플러그인이 나옵니다.
• 플러그인을 이용해서 헤더나 메뉴를 상단에 고정할 수 있습니다.

CSS를 이용하는 방법

• 플러그인을 이용해도 좋지만 CSS로 조금 더 간편하고 원하는 방식으로 고정할 수 있습니다.
• 메인 메뉴(Primary Menu)를 고정하려면 아래 코드를 디자인 -> 사용자 정의하기 -> 추가 CSS에 추가하면 됩니다.

/* GeneratePress 메뉴 고정 */

.main-navigation {
    position: sticky;        /*make it stick */
    top: 0;                  /* stick it to the top of the window */
    z-index: 999;           /* draw it over other elements */
}

 

• 헤더를 고정하는 방법은 아래 코드를 디자인 -> 사용자 정의하기 -> 추가 CSS에 추가하면 됩니다.
• 메인 메뉴를 헤더에 플로팅 한 경우에는 아래 코드만 추가해도 됩니다.

/* GeneratePress 헤더 고정 */

.site-header {
    position: sticky;        /*make it stick */
    top: 0;                  /* stick it to the top of the window */
    z-index: 999;           /* draw it over other elements */
}