여러분 안녕하세요.
필수 항목에 코드를 추가했지만 작동하지 않았습니다. 어디서 실수를 하고 있을까요?
플러그인도 시도해 보았지만, 검색창 영역이 깨져 버립니다.
음, 네, 헤더 바가 링크와 함께 작동하도록 하려면 CSS 작업을 좀 더 해야 할 것 같아요.
질문이 하나 있는데, 모바일용으로도 개발하고 계신가요? 모바일에서는 헤더에 추가할 공간이 데스크톱에 비해 훨씬 적거든요. 예쁜 데스크톱 사이트를 만들었다가 나중에 모바일 뷰가 엉망인 걸 발견하고 싶지 않을 테니까요.
바로 떠올리지는 못하지만, 거기서 사용할 수 있는 플러그인 아웃렛이 있을 수도 있어요. ![]()
릴리, 안녕.
데스크톱에서만 이렇게 하고 싶어.
모바일 뷰는 지금 상태가 괜찮아서, 거기의 헤더 영역을 좁히지는 않을 거야.
참고로, 만약 그렇게 안 되면 큰 문제는 아니야. 이 버튼은 포럼 카테고리로 리다이렉트되거든.
그냥 이 버튼으로 좋은 분위기를 연출하고 싶었어.
이 영역에 아이콘이 있는 것을 말씀하시는 건가요?

정확히 어떤 것을 찾고 계신지 자세히 말씀해 주시겠어요?
이 영역의 플러그인 아웃렛은 before-header-panel입니다.
Custom Header Links와 Header Search 컴포넌트에서 이 아웃렛을 사용합니다.
Custom Header Links가 정답입니다!
Lilly가 말했듯이, 여기서 CSS를 조정해야 합니다.
제 판단으로는 Header Links 컴포넌트가 아웃렛 컨테이너에 일부 CSS를 적용하고 있는데, 이것이 검색 기능을 깨뜨리는 원인이 될 수 있습니다.
괜찮으시다면, 컴포넌트를 다시 활성화해 주시겠습니까? 그러면 직접 포럼을 확인해 볼 수 있습니다.
여기에 설명이 되어 있지만, 필요한 코드를 입력해도 작동하지 않습니다.
이제 활성화했으니 확인해 주십시오. 도움을 주셔서 감사합니다 ![]()
이 코드를 사용하면 비로그인 사용자에게는 정상적으로 보입니다. 하지만 로그인한 사용자에게는 정상적으로 보이지 않습니다. 그 이유는 검색창을 중앙 정렬하기 위해 제가 사용한 코드 때문입니다.
로그인되어 있고, 예상대로 표시됩니다. 검색창이 중앙에 위치해 있는 것을 볼 수 있습니다. 제 스크린샷을 확인해 주세요. ![]()
네, 헤더 패널을 보완하기 위해 margin-right: -35px;을 수동으로 추가했었는데, 이제 링크가 추가되면서 그 값을 다시 조정해야 합니다.
이렇게 하는 이유는 로그인한 멤버의 경우 검색창이 좌우로 이동하지 않기 때문입니다. 로그인 전후로 검색창은 같은 위치에 그대로 머물러 있습니다.
하지만 커스텀 헤더 링크(Custom Header Links) 플러그인에도 영향을 미치는 것 같습니다. 지금은 거기에 버튼을 넣지 않는 것이 좋겠습니다. CSS와 HTML로 추가할 수 있다면 시도해 보고 싶습니다.
시간 내어 주셔서 감사합니다. ![]()
검색창을 absolute 위치 지정으로 플로우에서 분리할 수도 있습니다.
더 이상 margin이 필요하지 않습니다.
.floating-search-input-wrapper {
position: absolute;
left: 0;
top: calc((4em - 2.6rem - 2px - 2px) / 2); /* 헤더 높이 - 검색창 높이 - 마진 - 테두리 */
width: 100%;
}
해상도가 낮은 환경에서 너비를 제어하고 다른 요소와 겹치지 않도록 확인하기 위해 미디어 쿼리를 추가해야 할 수 있습니다.
정말 감사합니다, 제가 직접 확인해 보겠습니다. ![]()
하지만 커스텀 헤더 링크를 활성화하면 헤더 섹션의 모양이 정상적으로 보이지 않습니다.
큰 문제는 아닙니다. 그냥 헤더 섹션에 시각적으로 뭔가 추가하고 싶었을 뿐입니다.
Hi @Arkshine 방금 깨달았어요. 이 코드 이후로 로고를 클릭할 수 없게 됩니다.
position: absolute; 코드와 관련이 있을 것 같아요.
Arkshine님, 정말 감사합니다 ![]()