Divi에서 반응형 탐색 메뉴 수정

모든 화면 크기에서 멋지게 보이는 반응형 탐색 메뉴를 만드는 것은 어려울 수 있습니다. 그렇게 중요하지 않았으면 좋겠지만 탐색은 일반적으로 사이트의 모든 페이지 상단에 있기 때문에 모든 페이지에서 가장 먼저 표시되는 것입니다. 그래서 그것을 올바르게 얻는 것이 중요합니다. 고맙게도 Divi의 테마 사용자 지정 프로그램을 사용하면 몇 가지 멋진 헤더 옵션으로 기본 메뉴를 사용자 지정할 수 있습니다. 그러나 왼쪽에 로고가 있고 오른쪽에 메뉴 링크가 있는 기본 메뉴 스타일의 경우, 특히 헤더에 너무 많은 링크가 있는 경우 더 작은 화면 크기에서 상황이 쉽게 뒤섞일 수 있습니다. 나는 그것이 나에게 많이 일어난다는 것을 안다. 데스크탑에 딱 맞는 메뉴를 찾은 다음 태블릿(특히 iPad Pro)에서 확인하면 로고가 메뉴와 겹치고 일부 링크가 한 줄 아래로 이동합니다.

오늘 저는 복잡한 탐색 메뉴를 위한 몇 가지 유용한 솔루션을 제공하여 그렇게 일반적이지 않은 화면 크기에서도 멋지게 보이도록 하려고 합니다. 결국, 적어도 일부 사용자의 경우 사이트의 신뢰성이 사이트에 달려 있습니다.

시작하자.

Divi에서 반응형 탐색 메뉴 수정

YouTube 채널 구독

붐비는 탐색 메뉴를 위한 4가지 솔루션

Divi의 가장 큰 장점 중 하나는 미디어 쿼리(구분화된 CSS)를 사용하여 다양한 화면 크기에 맞게 사이트 스타일을 조정하는 유동적인 그리드 레이아웃을 기반으로 한다는 것입니다. 이러한 조정이 이루어지는 지점을 중단점이라고 합니다. 모든 화면 크기에서 기본 탐색 메뉴를 완성하려는 경우 미디어 쿼리를 사용하여 메뉴를 사용자 정의하고 특정 중단점을 조정해야 할 가능성이 있습니다.

문제

Divi의 기본 탐색 메뉴를 사용할 때 발생하는 가장 일반적인 문제는 클라이언트가 최상위 메뉴 항목을 많이 원할 때입니다. 기본 탐색 메뉴에 5개 이상의 메뉴 항목(또는 큰 글꼴 크기의 메뉴 항목이 있는 경우)이 있는 경우 화면 크기가 980-1100픽셀(소형 노트북 크기) 사이의 너비에 도달하면 줄 바꿈 및 확대된 로고가 생성되는 경우가 많습니다. 및 대형 정제). 전혀 눈치채지 못하셨더라도 이전에 이 문제를 겪은 적이 있으실 거라 확신합니다. 다음과 같이 보입니다.

이상적이지 않습니다. 이 문제에 대한 네 가지 솔루션을 살펴보겠습니다.

솔루션 #1: 메뉴 모음을 전체 너비로 만들기

일반적으로 내 사이트의 나머지 부분도 전체 너비로 만들지 않는 한 탐색 메뉴를 전체 너비로 만들 것을 제안하지 않습니다. 디자인의 일관성이 중요하다고 생각합니다. 그러나 때로는 탐색 메뉴가 모든 기기에서 멋지게 보인다는 의미인 경우 좋은 절충안이 될 수 있습니다. 그리고 간단한 수정이기도 합니다.

테마 사용자 정의 > 머리글 및 탐색 > 기본 메뉴 표시줄로 이동 하고 전체 너비로 만들기를 선택합니다.

해결 방법 #2: 로고 및 글꼴 설정을 조정합니다.

문제에 대한 또 다른 간단한 해결책은 테마 사용자 정의 설정을 사용하여 기본 로고 최대 높이, 텍스트 크기 또는 글꼴 옵션을 조정하는 것입니다.

쉽게 수정할 수 있도록 로고 또는 메뉴 항목의 디자인과 가독성을 손상시키지 않으려면 이러한 옵션을 조정할 때 주의하십시오.

솔루션 #3: 새로운 중단점에서 모바일 메뉴 표시.

다음은 Divi 내의 각 중단점에 대한 일반적인 범위입니다.

대형 데스크탑: 1405px 이상
표준 데스크탑: 1100px ~ 1405px
노트북 및 대형 태블릿: 980px ~ 1100px
태블릿: 768px ~ 980px
스마트폰 및 소형 태블릿: 320px ~ 768px;
스마트폰: 320px ~ 480px;

기본 탐색 메뉴가 모바일 메뉴(햄버거 탐색 포함)로 바뀌는 중단점은 980px입니다. 980px 미만의 모든 화면 크기는 모바일 메뉴를 표시합니다.

그러나 이상한 메뉴 줄 바꿈을 피하려면 중단점을 다른 값으로 변경합니다. 모바일 메뉴를 980px 대신 약 1024px로 표시하고 싶다고 가정해 보겠습니다. 이렇게 하려면 Divi의 기본 스타일을 재정의하기 위해 미디어 쿼리 내에 일부 사용자 정의 CSS를 삽입해야 합니다.

테마 사용자 정의 > 추가 CSS로 이동하여 다음을 입력하십시오.

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

이 미디어 쿼리는 두 가지 작업을 수행합니다. 일반 메뉴를 숨기고 1024px 중단점에 모바일 메뉴를 표시합니다.

솔루션 #4: 특정 중단점에서 메뉴 스타일 조정

이 솔루션은 특정 중단점에서 메뉴를 가장 많이 제어할 수 있기 때문에 아마도 최상의 옵션일 것입니다. 메뉴 항목의 대상은 CSS 클래스를 사용하여 미디어 쿼리에서 사용자 지정 스타일을 만들 수 있습니다.

메뉴 항목에 대한 Divi의 기본 CSS는 다음과 같습니다.

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

메뉴 글꼴 크기를 기본적으로 18px로 설정하고 특정 중단점에서 14px로 변경하고 싶다고 가정해 보겠습니다. 그리고 더 많은 공간을 절약하기 위해 패딩을 22px 대신 15px로 줄일 수 있습니다. 모든 메뉴 항목에 대해 CSS 클래스를 대상으로 지정하고 미디어 쿼리를 생성하여 이를 수행할 수 있습니다.

테마 사용자 정의 > 추가 CSS로 이동하여 다음을 입력하십시오.

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

이 CSS가 하는 일은 1200px 이하의 모든 화면에서 글꼴 크기를 14px로, 오른쪽 패딩을 15px로 변경하는 것입니다. 이렇게 하면 데스크탑에서 화면 크기를 조정할 때 부드러운 전환이 생성되고 대형 태블릿 및 소형 랩톱에서 기본 탐색을 유지할 수 있습니다.

다른 헤더 스타일 조정

Divi의 Theme Customizer에는 5가지 헤더 스타일이 있습니다(수직 탐색 제외). 5가지 스타일에는 기본(이 게시물에서 이미 언급한 것) 슬라이드인, 전체 화면, 중앙 및 중앙 인라인 로고가 포함됩니다.

슬라이드 인 및 전체 화면 스타일

웹 사이트 디자인에서 슬라이드 인 또는 전체 화면 스타일을 요구하는 경우 모바일 탐색 햄버거 아이콘이 모든 화면 크기에서 메뉴를 트리거하는 데 사용되기 때문에 반응형 메뉴는 거의 완벽합니다.

중앙 스타일

중앙 스타일을 사용하는 경우 숨을 쉴 수 있는 메뉴 항목을 위한 더 많은 공간이 있지만 여전히 더 많은 공간이 필요한 경우 기본 스타일에 사용한 것과 동일한 사용자 정의 솔루션을 사용하여 원하는 방식으로 표시할 수 있습니다.

중앙 인라인 로고 스타일

마지막으로 가운데에 있는 인라인 로고 스타일 헤더는 처음부터 제대로 이해하기가 약간 까다롭습니다. 로고가 페이지 중앙에 오도록 하려면 몇 가지 작업을 올바르게 수행해야 합니다. 먼저 중간 로고가 중심을 유지하도록 짝수개의 메뉴 항목이 있어야 합니다.

둘째, 각 메뉴 항목에 사용하는 텍스트의 양이 로고의 중심점을 결정합니다. 한 면에 더 많은 텍스트가 있으면 로고가 약간씩 꺼집니다. 이것은 대부분의 상황에서 큰 문제가 아니지만 로고 바로 아래에 가운데 요소가 있는 헤더가 있는 경우 수정해야 할 명백한 문제가 될 수 있습니다.

머리글 섹션의 중앙 로고와 비교하여 로고가 메뉴의 중앙에서 약간 벗어났습니다.

이제 메뉴 항목 레이블 "Information Elements"를 "Information"으로 줄이겠습니다. 이제 로고가 중앙으로 더 많이 이동하는 방법을 살펴보십시오.

이 솔루션은 원하는 로고를 얻는 데 필요한 전부일 수 있습니다. "About Us"를 "About"으로 또는 그 반대로 변경하여 이러한 작은 조정을 수행할 수 있습니다.

하지만 완벽주의자라면 조금 답답할 수 있습니다. 메뉴 항목의 실제 텍스트를 조정하여 로고의 중심점을 조정하는 대신 사용자 정의 CSS 클래스를 항목에 추가하고 오른쪽 또는 왼쪽에 약간의 여백을 줄 수 있습니다. 이것은 모든 것을 중앙에 두는 데 필요한 마지막 넛지를 제공해야 합니다.

wordpress 대시보드에서 모양 > 메뉴로 이동하고 화면 옵션 영역에서 CSS 클래스가 선택되어 있는지 확인합니다.

그런 다음 타겟팅하려는 메뉴 항목을 토글하여 엽니다. 그런 다음 CSS 클래스를 CSS 클래스 입력 상자에 입력합니다. 나는 나의 "넛지"라고 부른다.

그런 다음 Divi > Theme Customizer > Additional CSS 로 이동하여 다음 사용자 지정 CSS를 추가합니다.

#top-menu li.nudge  {
padding-right: 32px;
}

이 CSS를 사용하면 "nudge" 클래스가 있는 항목에만 32px의 오른쪽 패딩이 제공됩니다. 로고가 중앙에 올만큼만 밀어넣으면 됩니다.

그게 다야!

마무리 생각

Divi는 웹사이트 구축을 재미있고 쉽게 만듭니다. 그러나 때때로 작업(및 고객)의 요구 사항으로 인해 사이트가 뛰어난지 확인하기 위해 더 많은 노력을 기울일 필요가 있습니다. 그리고 좋은 사이트와 훌륭한 사이트의 차이점은 무엇입니까? 반응형 탐색 메뉴가 수행하는 방식은 올바르게 처리해야 하는 중요한 세부 정보 중 하나입니다. 대부분의 경우 사용자가 사이트의 모든 페이지에서 가장 먼저 보고 참여하게 됩니다. 깨진 메뉴는 나쁜 첫인상을 남길 수 있습니다. 이 포스트가 당신을 올바른 방향으로 “움직이는” 데 도움이 되기를 바랍니다.

이 게시물에서 다루지 않은 더 많은 문제와 솔루션이 있다고 확신합니다. 댓글에 자유롭게 게시하세요. 귀하의 의견을 기다리겠습니다.

건배!