⬇️ 드롭다운 헤더

케이건, 안녕하세요. 버튼처럼 보이도록 배경을 추가하려고 하는데, 보안 설정으로 숨겨진 여러 헤더 링크가 있을 때 숨겨진 메뉴의 잔재가 여전히 보입니다. 이 문제를 피할 수 있는 방법이 있을까요? 감사합니다!

수정: 버튼처럼 보이도록 패딩을 추가한 것이 원인인 것 같네요. 쉬운 해결책이 없다면 패딩 없이도 괜찮습니다.

.custom-header-links .top-level-links .custom-header-link {
    padding: 10px 20px;
    border-radius: 5px;
    background: var(--tertiary);
}

image

수정 2:
아니면, 창의적으로 해결했어요!

.custom-header-links .top-level-links .custom-header-link {
    padding: 10px 0px;
    border-radius: 5px;
    background: var(--tertiary);
}

.custom-header-links .top-level-links .custom-header-link-caret svg {
    padding-right: 10px;
}

.custom-header-links .top-level-links .custom-header-link-icon {
    padding-left: 10px;
}
2개의 좋아요

케건 안녕하세요. 다음 설정으로 보안 기능을 사용하려고 하면, 링크를 볼 수 있는 권한이 있는 계정(예: “company_staff” 사용자 그룹에 속한 계정)으로 보더라도 마지막 두 링크가 단순히 사라집니다.

기능을 올바르게 사용하지 않고 있는 걸까요?

감사합니다.
@keegan


안녕하세요 @kenjdarhan,

마지막 두 링크의 headerLinkId가 1과 2를 가리키고 있는 것으로 보입니다. 같은 드롭다운에 표시되기를 원하신다면 0이어야 할 것 같습니다.

안녕하세요, 저는 Dropdown Header 컴포넌트를 사용해 왔는데, 사용성이 매우 뛰어나고 저희에게 큰 도움이 되었습니다. 다만, 드롭다운 메뉴의 링크가 새 탭에서 열릴 수 있다면 더욱 좋겠습니다. 회신을 기다리겠습니다.

1개의 좋아요

PR을 환영합니다. 또는 해당 작업을 후원하려면 저희에게 연락해 주세요.

안녕하세요, 저는 Font Awesome을 처음 사용해 보는데 아이콘이 제대로 표시되지 않아서 고생하고 있습니다.
아직 이렇게까지 해 보았습니다. 혹시 도와주실 분 계신가요?

이전체 설정에 특이한 항목들을 추가하셨나요?

아, 정말 감사합니다. 계속 포맷으로 추가했는데 아무 효과가 없었거든요. 이렇게 알려주셔서 감사합니다.

2개의 좋아요

안녕하세요!

웹사이트에서 다른 페이지로 연결되는 아이콘/버튼의 위치를 설정할 수 있게 해준 템플릿의 어떤 부분이신지 알려주실 수 있을까요?
image

특히 모바일 버전에서 이 버튼들이 제목 위에 아이콘 형태로 훌륭하게 배치된 점이 정말 인상적이었습니다.

:+1:

1개의 좋아요

안녕하세요, 답변 주셔서 감사합니다 :blush:.

웹사이트의 모든 영역(포럼 포함) 사이에서 더 원활한 내비게이션을 위해, 드롭다운 컴포넌트를 제거하고 이 반응형 내비게이션 바를 사용하는 HTML 코드를 작성하기로 결정했습니다.

같은 웹사이트에 속한 다른 페이지들에서도 보실 수 있듯이, 모든 링크를 클릭 한 번으로 접근할 수 있도록 동일한 코드를 정확히 삽입해 두었습니다 :grin:

https://oii.francescomancuso.it/

https://oii.francescomancuso.it/risorse/

http://oii.francescomancuso.it/contest/

https://oii.francescomancuso.it/ranking/

1개의 좋아요

도대체 어떻게 고치나요? 아이콘이 아직도 안 뜨거든요 :smiling_face_with_tear:

@merefield 멋진 컴포넌트네요!

모바일 기기에서 메뉴 링크가 표시되지 않습니다. 링크를 오른쪽으로 배치하면 캐럿 아이콘은 표시되지만, 드롭다운 링크만 보일 뿐 메뉴 링크는 보이지 않습니다. 제가 놓치고 있는 부분이 있을까요?

데스크톱 화면, 모바일 화면 및 현재 설정에 대한 스크린샷을 첨부했습니다.

모바일 화면:

도움을 주시면 감사하겠습니다!

감사합니다.

1개의 좋아요

안녕하세요 @Joe_Nguyen, 이 컴포넌트를 설치했고 모바일과 데스크톱 뷰 모두에서 예상대로 작동하고 있습니다. 가능하시다면 컴포넌트 설정에서 ‘Launch Editor’ 버튼을 클릭했을 때의 설정 화면 스크린샷을 올려 주실 수 있을까요? 그곳에서 무슨 일이 일어나고 있는지 정확히 파악이 안 되는데, 모바일 뷰에서는 더 많은 항목이 표시되어야 할 것 같습니다 :thinking:

2개의 좋아요

릴리처럼 제게도 정상적으로 작동합니다.

크롬에서 반응형 창을 사용하시는 것 같네요. 그렇게 하시면 페이지를(F5) 최소 한 번은 새로고침해야 합니다. 그렇지 않으면 모바일 화면을 볼 수 없습니다.

또한 포럼 URL 뒤에 ?mobile_view=1을 추가하면 모바일 화면을 사용하는지 확인할 수도 있습니다.

3개의 좋아요

@Lilly 제 설정은 다음과 같습니다:

@Arkshine - URL에 ?mobile_view=1을 추가했을 때 드롭다운 화살표가 보이네요.

감사합니다!

2개의 좋아요

모바일 기기에 데스크톱 모드가 활성화되어 있지 않은지 확인해 보셨나요?

1개의 좋아요

안녕하세요 @Lilly! 이제 모바일에서 드롭다운 메뉴가 보입니다. :grinning: 링크를 새 창에서 열 수 있는 방법을 알아봐야겠어요.

1개의 좋아요

이것은 사용자가 설정/인터페이스 옵션에서 직접 구성하도록 두는 경향이 있습니다. 화면 낭독기를 사용하는 사용자는 링크가 새 창이나 탭에서 열리도록 오버라이드되는 경우 심각한 영향을 받기 때문입니다.

다시 한번 @Lilly @Arkshine 님, 도움을 주셔서 감사합니다!

1개의 좋아요

천만에요, 도움이 되었다니 기뻐요.

@Arkshine 님이 모든 일을 해 주셨고, 저는 그냥 코멘트만 남겼을 뿐이에요 LOL :laughing:

2개의 좋아요