[엘리멘터] 모바일 가로 스크롤 메뉴 만들기

안녕하세요! 유피입니다.

이번 포스팅은 엘리멘터를 이용해 메뉴를 만들었을때 모바일 및 테블릿에서 가로 스크롤을 적용시키는 방법에 대해서 소개할려고 합니다.

 

엘리멘터를 이용해서 헤더(Header) 안에 예시로 로고,메뉴,버튼을 만들었습니다.

데스크탑에서는 여전히 보기좋습니다. 모바일 버전으로 한번 볼까요?

(헤더는 웹페이지의 상단에 위치한 섹션입니다. 헤더는 일반적으로 웹사이트의 로고, 메뉴, 검색창, 사용자 계정 정보 등을 포함합니다. 헤더는 웹사이트의 방문자가 웹사이트의 주요 콘텐츠를 찾고, 웹사이트를 탐색하는데 도움을 줍니다.)

 

음... 조금 다듬어 볼까요..

햄버거 아이콘과 함께 드롭다운 형태로 보이는걸 없애야 될것같네요.

(워드프레스 메뉴 위젯 - 콘텐츠 - 모바일 드롭다운 - None으로 변경)

 

음.. 괜찮아 보이지만 모바일에서는 화면이 작기 때문에 메뉴가 두줄로 보이는게 마음에 들지 않습니다.

메뉴를 한줄로 보이게 만들고 스크롤이 가능하게 하기위해서 간단한 코드만 입력해주면 됩니다.

 

코드 적용방법 : 1.메뉴 위젯 - 고급 - CSS클래스에 mobile-menu 작성

2.커스텀 CSS에 아래 코드를 삽입

.mobile-menu ul{
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: inherit !important;
    scrollbar-width: none;
}
.mobile-menu ul::-webkit-scrollbar
    {display: none;
}

위의 코드를 적용하면

 

끝!