워드프레스에서 특정 메뉴 항목을 두 줄로 표시하는 방법

0

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

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

<br> 태그로 잘 해결이 안 되는 경우에 특정 메뉴 항목을 두 라인으로 표시하려면 내비게이션 라벨에 추가되는 메뉴 항목의 라벨에서 두 번째 라인 부분을 span 태그를 사용하여 둘러싸도록 합니다.

위의 그림과 같이 menu-break 클래스를 추가합니다(물론 클래스 이름은 원하는 대로 지정이 가능합니다). 그리고 다음 CSS 코드를 추가하도록 합니다.

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

CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS에 추가하거나 테마 옵션 내의 Custom CSS 섹션에 추가할 수 있습니다. 또는 자식 테마(차일드 테마) 내의 style.css 파일에 추가해도 됩니다.

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

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

참고로 아래 YouTube 영상에서는 <br> 태그를 사용하여 두 줄로 표시하고 있네요.

참고:

*일부 글에 제휴링크가 포함될 수 있으며, 기부를 통해 블로그 운영을 후원하실 수 있습니다.

Related Posts

댓글 남기기