이 컴포넌트가 도움이 될 것 같습니다.
두 스크린샷에서 버거 메뉴 버튼의 위치가 다르므로, 두 번째 경우에는 모바일 모드를 사용하지 않은 것으로 보입니다.
URL에 ?mobile_view=1을 추가하면 모바일 뷰로 볼 수 있습니다. 따라서 스타일링을 개선하면서 제목 표시 기능을 계속 활용할 수도 있습니다.
제가 원했던 바로 그거네요. 감사합니다!
저는 Chrome의 검사(Inspect) 패널에 가서 버튼을 클릭하여 모바일 뷰를 활성화했습니다. 왜 메뉴가 왼쪽으로 이동했는지는 저도 모르겠습니다…
가끔 그 뷰가 정확하지 않은 것을 알아차렸습니다.
?mobile_view=1 팁 감사합니다. 몰랐습니다.
이 기능에 익숙하지 않은 분들을 위해(그리고 정상으로 되돌리는 데 시간이 좀 걸렸거든요) 정상으로 돌아가려면 ?mobile_view=0을 추가하면 된다고 말씀드리고 싶습니다. 예: https://example.com?mobile_view=0
?mobile_view=1 옵션을 사용할 때, 토픽 타이틀로 전환되는 지점에 도달하면 이상하게 동작하는 것을 알아차렸지만, 모바일에서는 그렇지 않았습니다. 데스크톱 브라우저를 사용할 때 뭔가 이상한 점이 있는 것 같습니다.
제 스크린샷에서 보실 수 있듯이, 헤더가 엉망이 된 것 외에도 카테고리 슬라이더가 완전히 제거되었습니다.
1 - 헤더 높이가 제대로 조정되지 않아서 그런 것일까요?
2 - 그런 변경이 발생할 때에만 적용되는 CSS를 어떻게 만들 수 있을까요?
@Moin 공유해 주신 URL 트릭(컴포넌트 설치 없이)으로 모바일 버전을 확인해 보니, 토픽 상단에 있을 때 다음과 같은 화면이 표시됩니다:
스크롤을 하면 다음과 같은 화면이 보입니다:
즉, class="wrap custom-categories-navbar"가 있는 div가 완전히 제거됩니다. 카테고리 슬라이더가 사라지지 않도록 막기 위해서는 이 문제를 해결하는 데 더 많은 작업이 필요하며, 다른 접근 방식이 필요해 보입니다.
