워드프레스에서 상단 메뉴 고정하는 방법[CSS 사용]

CSS를 사용하여 워드프레스에서 상단 메뉴를 고정하여 화면이 스크롤되더라도 메뉴가 따라 내려오도록 할 수 있습니다. 다음과 같은 CSS 코드를 추가하며 됩니다(CSS 코드를 워드프레스에서 추가하는 방법은 여기를 참조하시기 바랍니다.)

#navigation /* 요소 이름은 해당 테마에 맞게 수정 */
{
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}

상황에 따라 텍스트 정렬(예: text-align: right;), 배경색, 높이, 패딩 값 등을 추가할 수 있습니다. 그리고 위의 코드를 사용하면 헤더 부분이 상단 내비게이션의 높이만큼 위로 올라갈 수 있습니다. 그런 경우 헤더에 margin-top을 추가하시면 됩니다.

위의 코드는 상단 메뉴뿐만 아니라 헤더 부분에도 적용할 수 있습니다. 위의 코드를 응용하여 이 사이트의 맨 상단에 있는 메뉴를 고정해보면 아래 그림과 같이 스크롤하더라도 상단 메뉴가 따라서 내려옵니다.
Fixing top navigation wordpress
이 방법을 사용하면 사이트의 성능을 저하시킬 수 있는 플러그를 추가로 설치하지 않고(메뉴나 헤더 등을 고정하는 플러그인은 여기 참조) 간단히 CSS만으로 화면을 따라 내려오는 고정 메뉴를 만들 수 있습니다.


UberMenu - Sticky Menu Extension

이러한 작업이 쉽지 않은 경우 플러그인을 고려해볼 수 있습니다. UberMenu 메가 메뉴는 스타일리쉬한 메뉴를 만들어주는 플러그인으로 많은 사용자가 사용하고 있습니다. 또,이 플러그인의 확장 기능으로 UberMenu - Sticky Menu Extension 플러그인을 함께 사용하면 보다 멋진 효과를 얻을 수 있을 것입니다.

UberMenu - Sticky Menu Extension

여기에서 실제 작동을 확인해볼 수 있습니다. 참고로 플러그인은 가급적 사용을 줄이는 것이 사이트 성능에 도움이 됩니다. 하지만, 원하는 기능을 수동으로 구현할 수 없는 경우에는 어쩔 수 없이 플러그인을 이용해야 할 것 같습니다. 가급적 직접 기능을 구현하기 위해 노력해 본 후에 잘 안 되는 경우에 플러근 사용을 고려하시면 좋을 듯 합니다.


4개 댓글

  1. /*  메뉴 고정 */

    #masthead {
    z-index: 9999;
    position: fixed;
    width: 100%;
    box-shadow: 2px 2px 6px; /* 그림자 선택 사항 */
    }

    /* 본문 짤림 방지 */

    #primary {
    margin-top : 100px;
    }

    #right-sidebar {
    margin-top : 100px;
    }

      1. 혹시 메뉴를 고정할 수 있는 CSS 코드도 발견 하시게 되면 알려주시면 감사하겠습니다! 이 사이트에서 많은 도움을 받고 있습니다. 고맙습니다!

댓글 남기기

* 이메일 주소는 공개되지 않습니다.