엘리멘터 모바일 메뉴 레이아웃 변경 (햄버거 메뉴 vs. PC 메뉴)

워드프레스 엘리멘터 페이지 빌더로 사이트를 제작할 때 모바일에서 메뉴는 보통 햄버거 메뉴로 표시됩니다. 모바일에서도 PC 메뉴와 같이 수평 내비게이션 레이아웃을 원하는 경우 모바일 드롭다운에 대한 분기점(Breakpoint) 설정을 조정할 수 있습니다.

엘리멘터 모바일 메뉴 레이아웃 변경

Elementor Pro를 사용하는 경우 테마 빌더를 통해 헤더 레이아웃을 만들 수 있습니다. 여러 개의 헤더 템플릿을 만들어서 페이지에 따라 다른 헤더를 사용하도록 지정할 수 있습니다.

헤더 템플릿을 새로 만들거나 기존 템플릿을 수정하려면 워드프레스 알림판 » 템플릿 » Theme Builder를 클릭하고 Header를 선택합니다.

Add New를 클릭하여 새 템플릿을 만들거나 기존 템플릿을 편집할 수 있습니다.

헤더 템플릿은 수동으로 직접 만들 수 있지만, 라이브러리에서 미리 만들어진 템플릿을 선택하면 편리합니다.

테스트로 프로 헤더 템플릿 중 하나를 로드해보았습니다. PC에서는 일반적인 메뉴 모양(수평 내비게이션)으로 표시되지만 모바일 기기에서는 보통 아래 그림과 같이 햄거버 메뉴로 표시됩니다.

햄버거 메뉴 아이콘을 클릭하면 드롭다운 형식으로 메뉴가 표시됩니다.

햄버거 메뉴 레이아웃을 PC 메뉴와 같이 수평 내비게이션으로 표시하고 싶은 경우 Mobile Dropdown(모바일 드롭다운) 섹션의 Breakpoint(분기점) 옵션을 None으로 설정합니다.

그러면 위의 그림과 같이 메뉴가 수평 내비게이션 레이아웃으로 표시됩니다. 하지만 메뉴 항목이 많아서 여러 줄에 걸쳐 메뉴가 표시될 것입니다.

이 문제를 해결하려면, 메뉴 컬럼 너비를 늘릴 수 있습니다. 

위의 그림과 같이 메뉴 부분의 컬럼 너비를 100%로 늘리고, 로고 이미지는 CSS로 숨기거나 로고 이미지를 메뉴 위 중앙에 위치하도록 CSS로 조정할 수 있을 것입니다.

혹은, 로고 이미지 컬럼과 메뉴 컬럼의 비율을 적절히 조정(예: 10:90 혹은 20:80)하는 것도 고려해볼 수 있을 것입니다.

모바일 분기점 해상도 설정은 Site Settings(사이트 설정)에서 변경할 수 있습니다.

위의 그림에서는 모바일 분기점이 767px로 설정되어 있습니다. 이 경우 다음과 같은 CSS 미디어 쿼리(예시)를 사용하여 모바일 장치에 대한 스타일을 조정할 수 있습니다.

/* 모바일 기기에서 헤더 숨기기 */
@media screen and (max-width: 767px) {
    #elementor-header {
        display: none;
    }
}

마치며

이상으로 Elementor 페이지 빌더를 사용하여 헤더를 만드는 경우 모바일 기기에서의 메뉴 레이아웃을 데스크탑에서의 메뉴 레이아웃과 동일하게 수평으로 표시되도록 하는 방법에 대하여 살펴보았습니다. 엘리멘터 프로를 사용할 경우 테마 파일을 수정할 필요 없이 테마 빌더로 사이트의 모든 섹션을 자유롭게 커스텀할 수 있습니다. 엘리멘터에 대한 자세한 정보는 엘리멘터 사이트를 참고하시기 바랍니다.

엘리멘터 사이트 방문하기

참고

https://avada.tistory.com/2794

엘리멘터: 페이지 전체 화면을 배경 이미지로 채우는 방법

https://avada.tistory.com/2789

워드프레스 Divi 테마용 무료 웹 개발자 레이아웃 팩(Web Developer Layout Pack) 다운로드

https://avada.tistory.com/2793

워드프레스 업데이트 테스트 작업