헤더 영역에 버튼을 추가하는 방법은?

여러분 안녕하세요.

필수 항목에 코드를 추가했지만 작동하지 않았습니다. 어디서 실수를 하고 있을까요?

플러그인도 시도해 보았지만, 검색창 영역이 깨져 버립니다.

음, 네, 헤더 바가 링크와 함께 작동하도록 하려면 CSS 작업을 좀 더 해야 할 것 같아요.

질문이 하나 있는데, 모바일용으로도 개발하고 계신가요? 모바일에서는 헤더에 추가할 공간이 데스크톱에 비해 훨씬 적거든요. 예쁜 데스크톱 사이트를 만들었다가 나중에 모바일 뷰가 엉망인 걸 발견하고 싶지 않을 테니까요.

바로 떠올리지는 못하지만, 거기서 사용할 수 있는 플러그인 아웃렛이 있을 수도 있어요. :thinking:

릴리, 안녕.
데스크톱에서만 이렇게 하고 싶어.
모바일 뷰는 지금 상태가 괜찮아서, 거기의 헤더 영역을 좁히지는 않을 거야.
참고로, 만약 그렇게 안 되면 큰 문제는 아니야. 이 버튼은 포럼 카테고리로 리다이렉트되거든.
그냥 이 버튼으로 좋은 분위기를 연출하고 싶었어.

이 영역에 아이콘이 있는 것을 말씀하시는 건가요?

image

정확히 어떤 것을 찾고 계신지 자세히 말씀해 주시겠어요?

안녕하세요 @Arkshine

프리미엄처럼

이 영역의 플러그인 아웃렛은 before-header-panel입니다.

Custom Header Links와 Header Search 컴포넌트에서 이 아웃렛을 사용합니다.

Custom Header Links가 정답입니다!

Lilly가 말했듯이, 여기서 CSS를 조정해야 합니다.
제 판단으로는 Header Links 컴포넌트가 아웃렛 컨테이너에 일부 CSS를 적용하고 있는데, 이것이 검색 기능을 깨뜨리는 원인이 될 수 있습니다.
괜찮으시다면, 컴포넌트를 다시 활성화해 주시겠습니까? 그러면 직접 포럼을 확인해 볼 수 있습니다.

여기에 설명이 되어 있지만, 필요한 코드를 입력해도 작동하지 않습니다.

이제 활성화했으니 확인해 주십시오. 도움을 주셔서 감사합니다 :pray:

감사합니다!

다음 CSS를 추가해 보세요:

.floating-search-input-wrapper .floating-search-input {
    margin: auto;
}

이 코드를 사용하면 비로그인 사용자에게는 정상적으로 보입니다. 하지만 로그인한 사용자에게는 정상적으로 보이지 않습니다. 그 이유는 검색창을 중앙 정렬하기 위해 제가 사용한 코드 때문입니다.

로그인되어 있고, 예상대로 표시됩니다. 검색창이 중앙에 위치해 있는 것을 볼 수 있습니다. 제 스크린샷을 확인해 주세요. :thinking:

조금 왼쪽으로 이동된 것 같습니다.

네, 헤더 패널을 보완하기 위해 margin-right: -35px;을 수동으로 추가했었는데, 이제 링크가 추가되면서 그 값을 다시 조정해야 합니다.

이렇게 하는 이유는 로그인한 멤버의 경우 검색창이 좌우로 이동하지 않기 때문입니다. 로그인 전후로 검색창은 같은 위치에 그대로 머물러 있습니다.

하지만 커스텀 헤더 링크(Custom Header Links) 플러그인에도 영향을 미치는 것 같습니다. 지금은 거기에 버튼을 넣지 않는 것이 좋겠습니다. CSS와 HTML로 추가할 수 있다면 시도해 보고 싶습니다.

시간 내어 주셔서 감사합니다. :hugs:

검색창을 absolute 위치 지정으로 플로우에서 분리할 수도 있습니다.
더 이상 margin이 필요하지 않습니다.

.floating-search-input-wrapper {
   position: absolute;
   left: 0;
   top: calc((4em - 2.6rem - 2px - 2px) / 2);  /* 헤더 높이 - 검색창 높이 - 마진 - 테두리 */
   width: 100%;
}

해상도가 낮은 환경에서 너비를 제어하고 다른 요소와 겹치지 않도록 확인하기 위해 미디어 쿼리를 추가해야 할 수 있습니다.

정말 감사합니다, 제가 직접 확인해 보겠습니다. :pray:

하지만 커스텀 헤더 링크를 활성화하면 헤더 섹션의 모양이 정상적으로 보이지 않습니다.

큰 문제는 아닙니다. 그냥 헤더 섹션에 시각적으로 뭔가 추가하고 싶었을 뿐입니다.

Hi @Arkshine 방금 깨달았어요. 이 코드 이후로 로고를 클릭할 수 없게 됩니다.

position: absolute; 코드와 관련이 있을 것 같아요.

다음 CSS를 추가하면 로고를 검색창 위에 쌓이도록 배치할 수 있습니다.

.home-logo-wrapper-outlet {
    z-index: 1;
}

양쪽 측면을 처리할 필요가 없도록 floating-search-input에 대한 다른 해결책이 있습니다 (floating-search-input-wrapper의 CSS를 제거했는지 확인하세요):

.floating-search-input {
    position: absolute;
    left: 0;
    transform: translateX(calc(50vw - (33rem / 2)));
}

Arkshine님, 정말 감사합니다 :pray: