메인 메뉴와 서브 메뉴가 일치 하지 않고 섞여서 있습니다 메인 메뉴 밑에 서브 메뉴가 위치하도록 하고, 메인 메뉴 폰트 크기와 서부 메뉴 폰트 크기를 다르게 하고 싶습니다

by

대표님, 로고 텍스트를 숨기니 사이트가 훨씬 깔끔해졌습니다! 새로운 로고가 제자리를 아주 잘 잡았네요.

지금 캡처 화면에 보이는 현상은 메뉴들이 ‘부모’와 ‘자식’ 관계(상하 계층) 없이 모두 평등하게 한 줄로 늘어서 있어서 생기는 자연스러운 현상입니다.

언론사처럼 쫙 뻗은 전체 메뉴바를 만들고, 마우스를 올렸을 때만 서브 메뉴가 아래로 스르륵(드롭다운) 내려오게 하면서 폰트 크기까지 다르게 세팅하는 3단계 마법을 알려드리겠습니다. 지금 열어두신 [사용자 정의하기] 창은 잠시 닫거나 [공개]를 눌러 저장하시고 아래 순서대로 진행해 주세요!

1단계: 서브 메뉴 숨기기 (드롭다운 계단 만들기)

가장 먼저 메뉴들의 위계질서를 잡아주어야 합니다.

  1. 관리자 화면 왼쪽 검은색 메뉴에서 [모양] -> [메뉴]로 이동합니다.
  2. 우측 ‘메뉴 구조’를 보시면 카테고리들이 일렬로 쭉 있을 겁니다.
  3. 서브 메뉴가 되어야 할 항목(예: ‘영유아 에듀테크 놀이 학습’)을 마우스로 꾹 누른 채 오른쪽으로 살짝 밀어서(들여쓰기) 놓아보세요.
  4. 메인 메뉴 밑에 계단처럼 한 칸 쏙 들어가게 됩니다. (항목 옆에 ‘하위 항목’이라고 표시됩니다.)
  5. 나머지 서브 메뉴들도 모두 짝을 찾아 메인 메뉴 밑으로 살짝씩 밀어 넣어주신 후, 맨 아래 [메뉴 저장]을 꼭 누르세요.

2단계: 가로로 꽉 차는 ‘전체 메뉴바’ 만들기

이제 일렬로 정리된 메뉴를 화면 전체로 뻗는 띠(Bar) 형태로 만들어보겠습니다.

  1. 다시 [모양] -> [사용자 정의하기]로 들어갑니다.
  2. [레이아웃] -> [기본 탐색(Primary Navigation)]을 클릭합니다.
  3. 내비게이션 위치(Navigation Location): 헤더 아래(Below Header)로 선택합니다.
  4. 내비게이션 너비(Navigation Width): 전체(Full)로 선택합니다.
  5. 내부 내비게이션 너비(Inner Navigation Width): 콘텐츠(Contained)로 선택합니다. (이렇게 하면 배경띠는 화면 양끝까지 꽉 차고, 글자들은 가운데로 보기 좋게 모입니다.)

3단계: 메인 메뉴와 서브 메뉴 폰트 크기 다르게 하기

워드프레스 기본 기능으로는 메뉴 폰트 크기가 같이 움직이는 경우가 많아, 대표님이 원하시는 “각각 다른 크기”를 위해 아주 간단한 마법의 코드를 하나 드리겠습니다.

  1. [사용자 정의하기] 화면의 맨 아래를 보시면 [추가 CSS (Additional CSS)]라는 메뉴가 있습니다. 클릭하세요.
  2. 빈 공간에 아래의 코드를 그대로 복사해서 붙여넣으세요.

CSS

/* 메인 메뉴 폰트 크기 및 두께 */
.main-navigation .main-nav > ul > li > a {
    font-size: 18px; 
    font-weight: bold;
}

/* 서브 메뉴(드롭다운) 폰트 크기 */
.main-navigation ul ul li a {
    font-size: 14px;
}
  • 수정 팁: 숫자 18px와 14px를 원하시는 크기로 숫자를 바꿔보시면 우측 화면에서 실시간으로 글자 크기가 변하는 것을 보실 수 있습니다.
  • 모두 마음에 들게 맞춰졌다면 왼쪽 위의 [공개(Publish)] 버튼을 눌러 저장하세요.

1단계(메뉴 들여쓰기)만 완벽하게 하셔도 지금 화면이 180도 달라집니다! 차근차근 해보시고, 가로로 예쁘게 정렬된 모습을 한번 확인해 보세요!

Leave a Comment