워드프레스 엘리멘터로 모바일에서 가로 스크롤 메뉴 만들기

워드프레스 엘리멘터(Elementor)로 웹사이트를 만들 때 메뉴가 모바일에서는 가로(Horizontal)로 스크롤하게 만들 수 있을까?

PC웹과 모바일웹의 메인 메뉴

웹사이트의 메인 메뉴는 보통 가로 바 형태이다. 이게 2000년 전후로 유행했는데 20년이 넘어서도 여전하다. 달라진건 스마트폰이 생기면서 모바일에서 웹 사이트를 볼 수 있어야 하는데 가로 바는 사라지고 세줄 또는 햄버거 메뉴라고 불리우는 메뉴 버튼을 눌러서 메뉴를 볼 수 있다.

모바일에서 웹 사이트의 메뉴가 바로 보이지 않고 한 번 더 누르는게 불편하다. 또한 메인 메뉴는 어떤 기능이나 페이지를 이동하기 위한 메뉴로서 역할도 하지만 메뉴 레이블 자체도 이 사이트에서 뭘 제공하는지 알 수 있게 해준다.

워드프레스와 엘리멘터로 기업 홈페이지를 만들면서 PC처럼 넓은 화면에서는 메인 메뉴가 가로로 보이고, 모바일에서는 세줄 또는 햄버거 메뉴가 아니라 바로 가로 메뉴바가 보이고 가로로 좌우로 스크롤하게 만들고 싶었다. 1차 메인 메뉴가 아주 많지 않으면 해상도가 높은 스마트폰에서는 스크롤하지않고도 메뉴를 다 볼 수도 있다.

내가 원하는 것과 가장 비슷한 사이트는 네이버 뉴스와 네이버 스포츠의 메인 메뉴이다.

아래는 네이버 스포츠의 메인 메뉴이다. PC웹이라고 부르는건 적절하지 않은 것 같다. 넓은 태블릿에서는 이렇게 보이니깐 말이다.

모바일에서 네이버 스포츠는 가로로 메뉴가 보인다. 내 아이폰 14에서는 7개의 메뉴가 보이지 않는다.

메인메뉴를 손가락으로 오른쪽에서 왼쪽으로 스크롤하면 숨겨진 메뉴를 볼 수 있다. 문제는 가로로 스크롤 할 수 있다는 어포던스가 없다. 마지막 메뉴가 살짝가려져 있으면 더 있을 거라고 예측할 수 있다. 그러나 기기의 너비 마다 이렇게 할 수 없는 문제가 있다.

모바일에서 네이버 뉴스와 네이버 스포츠의 메뉴가 가로로 스크롤하는 것을 동영상으로 만들어보았다. 아이폰 화면 녹화라 손가락이 안 보이지만 상단 메뉴가 움직이는 것을 볼 수 있다.

엘리멘터로 모바일에서 메인 메뉴 가로스크롤 (Horizontal scroll)하게 만들기

워드프레스 엘리멘터 플러그인으로 웹사이트를 만들 때 PC웹에서는 메뉴가 다 보이고, 태블릿이나 스마트폰 처럼 작은 화면에서는 가로로 스크롤하게 할 수 있다.

1.모바일에서 표시할 메뉴를 추가하고, PC에서 접속하면 메뉴를 숨기게 한다.

2. 그런 다음 메뉴를 넣은 칼럼의 커스텀 CSS에 아래 코드를 복사해서 붙여 넣으면 된다.

CSS 전체 코드는 다음과 같다.

selector ul{
     white-space: nowrap;
    overflow-x: auto; 
    overflow-y: hidden;
    flex-wrap: inherit !important;
    scrollbar-width: none; 
}
 

 
selector ul::-webkit-scrollbar { 
  display: none; }

엘리멘터로 모바일에서 메인 메뉴 가로스크 만들기 튜토리얼

내가 찾은 코드와 방법은 아래 동영상이다.

아래 다른 영상도 참고했다.

마치며

워드프르세 엘리멘터 플러그인은 무료로도 충분히 사용할 수 있는데 고급 기능은 유료로 구입해야한다.

모바일에서 메뉴를 가로로 스크롤 하게 하려면 커스텀 CSS를 사용해야하는데, 커스텀 CSS는 무료에서는 사용할 없고 유료인 엘리멘터 프로에서만 사용할 수 있다. 코딩하지 않고 테마를 만들고 유료 위젯과 이런 고급 기능을 사용하기 위해 엘리먼터 프로를 구입했다. 연 구독이라 부담은 되지만 그래도 테마를 파워포인트 사용하듯이 코딩하지 않고 만들 수 있다. 코딩이 안되니 돈으로 해결했다.