Как предотвратить появление элементов под фиксированной навигационной панелью в WordPress? - PullRequest
Новая
       23

Как предотвратить появление элементов под фиксированной навигационной панелью в WordPress?

0 голосов
/ 01 мая 2019

Я использую шаблон Astra с плагином Elementor.

Я настроил свою панель навигации для исправления - для прокрутки вдоль веб-страницы, но теперь мои элементы появляются под ней.И я не говорю о проблеме z-index, но первое, что приходит после navbar - хлебные крошки + заголовок находятся под navbar. 

.main-header-bar-wrap{
    position:fixed;
    top:0;
    width:100%;
}

Я решил проблему, используя - 

padding-top:100px;

Но я не думаю, что это лучшая практика.

Есть ли лучшее решение?

Спасибо!

1 Ответ

1 голос
/ 01 мая 2019

К сожалению, на самом деле не существует единственного надежного способа сделать это. Фиксированные элементы полностью исключаются из потока страницы и того, как он отображается, поэтому не занимают места. https://developer.mozilla.org/en-US/docs/web/css/position#fixed

То, как вы это сделали, это один из вариантов, другой - изменить отступы, чтобы соответствовать высоте при изменении размера окна (чтобы убедиться, что высота всегда правильная).

например. что-то вроде: 


$(window).resize(function () {
        $(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
    })

Другой вариант - создать скрытую копию заголовка с position: relative и visibility: hidden, которая займет требуемое пространство, но не будет видна. Просто добавьте свойство aria-hidden="true", чтобы у людей с программами чтения с экрана не было дублирующегося меню.

Вы можете сделать это с помощью js следующим образом: 


$( ".main-header-bar-wrap" ).after( 
       $(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true") 
);

Это продублирует заголовок и добавит класс spacer ко второй версии, чтобы можно было отдельно стилизовать его со свойствами visibility и position вместе с атрибутом aria-hidden.

...