끈적 끈적한 헤더 및 WP 관리자가 행동 할 수 있습니다.

겹치는 WordPress Sticky Head 및 Management Bar의 문제를 해결하십시오. WordPress 테마에서 끈적 끈적한 헤드 (또는 고정 위치 헤드)는 관리 막대와 겹칩니다. 둘 다 를 사용하여 시각적 충돌을 초래합니다. 관리 막대의 Z-Index가 99999 인 경우 일반적으로 피사체의 끈적 끈적한 헤드를 다룹니다 (그 반대). 이 기사에서는 CSS (및 SASS)를 사용 하여이 문제를 해결하는 방법을 설명합니다.

position: fixed; top: 0; (참고 : 일부 주제는 JavaScript를 사용하여 끈적 끈적한 요소를 찾습니다. javaScript가 인라인

특성을 계속 업데이트하면 다음 방법이 유효하지 않습니다.) CSS를 사용하여 헤드 위치를 조정하십시오 단순화하기 위해 는

클래스를 사용하여 페이지 상단에 고정 된 요소를 나타냅니다. 주제에 따라 올바른 선택기를 찾아야합니다. 우리는 그 위치 값이 0이라고 가정합니다. 관리 막대가 프론트 엔드에서 볼 수 있으면 WordPress는

클래스를 페이지의 요소에 첨부합니다. (이것은 일반적으로 의 함수에 의해 처리됩니다.)이 클래스를 사용하면 끈적 끈적한 헤드의 top 위치를 조정할 수 있습니다. 관리 막대의 높이는 32px입니다. 끈적 끈적한 머리를 아래로 움직여야합니다. 그러나 문제는 관리 막대 높이가 항상 32px가 아니라는 것입니다.

작은 화면의 CSS 너비가 783px 미만인 화면에서 관리 막대 높이는 46px입니다. 다음을 보상하려면 코드를 수정해야합니다

모바일 우선 CSS를 선호하는 경우 다음 코드를 사용하십시오.

sass 와 함께 재사용 가능한 믹스를 만듭니다 Sass와 함께 테마를 구축하면 재사용 가능한 믹스로 캡슐화 할 수 있습니다. .sticky-header 이 mixin은 지정된 요소 (비 0)의 top를 허용합니다. 오프셋이 지정되지 않으면 Mixin은 0이라고 가정합니다. 수동으로 를 지정하면 조건이 기본 관리 열 높이 값을 수정합니다. top <:> 사용 방법 :

결론 위의 코드 스 니펫을 통해 끈적 끈적한 헤드와 워드 프레스 관리 막대 사이의 충돌을 쉽게 해결할 수 있습니다. Sass Mixin은 코드의 재사용 성을 향상시킵니다. <code>.admin-bar FAQS (FAQS) (FAQ 부분은 기사가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. FAQ 부품을 필요에 따라 추가하거나 수정할 수 있습니다.) .

위 내용은 끈적 끈적한 헤더 및 WP 관리자가 행동 할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!