워드프레스 메뉴를 두 줄로 표시하는 방법

내비게이션 메뉴에서 특정 메뉴 항목의 길이가 길거나 돋보이게 하기 위해, 혹은 다른 이유로 워드프레스 메뉴를 두 줄로 표시하고 싶은 경우가 있을 수 있습니다.

※ 영어 메뉴명과 한글 메뉴명을 동시에 표시하고 싶거나, 메뉴명과 함께 부가적인 문구를 추가하고 싶은 경우에도 메뉴을 두 줄 혹은 여러 줄로 표시하는 것을 고려할 수 있습니다.

이 경우 직관적으로 내비게이션 라벨에 <br> 태그를 사용하는 것을 생각해볼 수 있습니다. 하지만 <br> 태그를 사용하면 테마에 따라 의도치 않게 이상하게 표시될 수 있습니다.

<br> 태그로 의도한 대로 잘 해결이 안 되는 경우 아래에서 설명하는 방법으로 워드프레스의 특정 메뉴 항목을 두 라인으로 표시할 수 있습니다.

워드프레스 메뉴를 두 줄로 표시하기

워드프레스 메뉴를 두 줄로 표시하기 - 아바다 테마

먼저 테마 디자인 > 메뉴로 이동하여 두 줄로 표시하고 싶은 메뉴 항목을 클릭하고 위의 그림에서처럼 "내비게이션 라벨"에 다음과 같은 형식으로 라벨을 입력합니다.

About<span class="menu-break">소개</span>

즉, 내비게이션 라벨에 추가되는 메뉴 항목의 라벨에서 두 번째 라인 부분을 span 태그를 사용하여 둘러싸고 span 태그에 menu-break 클래스를 추가합니다(물론 클래스 이름은 원하는 대로 지정이 가능합니다).

다음 CSS 코드를 테마 디자인 (워드프레스 버전에 따라 "외모") > 사용자 정의하기 > 추가 CSS 또는 차일드 테마 내의 스타일시트 파일(style.css)에 추가하도록 합니다.

span.menu-break {
display: block;
line-height: 0;
bottom: 35px;
position: relative;
}

이제 메뉴가 두 줄로 표시될 것입니다.

워드프레스 메뉴를 두 줄로 표시하는 방법 1

아바다의 Travel 데모에서 적용해보니 메뉴 항목이 두 줄로 잘 표시되네요. 실제로 해보면 조금 어색할 수 있습니다. CSS에서 bottom 값을 조정하고 테마에 따라 메뉴 높이도 적절히 조정해야 할 수도 있습니다.

아바다 테마에서 헤더를 왼쪽 또는 오른쪽으로 배치하고 메뉴의 높이를 조정하고, CSS 코드를 적절히 변경하여 다음 그림과 비슷하게 메뉴를 두 줄로 추가하는 것이 가능합니다.

워드프레스 메뉴를 두 줄로 표시하는 방법 2

아바다 테마에서 헤더를 왼쪽 또는 오른쪽에 설정한 경우 다음과 비슷한 코드로 테스트해보시기 바랍니다. (메인 메뉴 높이는 Avada > 테마 옵션 > 메뉴 > Main Menu > Main Menu Height에서 설정할 수 있습니다.)

// Make menu items in two lines in WordPress Avada theme
// 아바다 테마의 Classic 데모에서 메뉴 항목을 두 줄로 표시
span.menu-break {
display: block;
line-height: 0;
bottom: 13px;
position: relative;
}

span.menu-text {
    padding-bottom: 15px;
    line-height: 65px;
}

글자 크기도 적절히 조정할 수 있습니다. 다른 테마에서도 마찬가지 방법으로 적용이 가능합니다. 엔폴드 등의 테마에서도 위의 코드가 잘 작동하는 것을 확인했습니다.

테마에 맞게 CSS 크기를 적절히 조정하고, 경우에 따라 메뉴의 높이 등의 설정도 함께 조정해보시기 바랍니다.

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

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