Как сделать липкое меню на WordPress

Сегодня делаем липкое меню на сайте WordPress без плагина, добавив дополнительные стили CSS и при помощи плагина myStickymenu.
Липкое меню — это когда при прокрутке страницы меню всегда висит на верху и следует за контентом.

Начнем с дополнительных стилей. Заходим в админке сайта в настройки темы и открываем дополнительные стили.

И вставляем вот этот код:

#site-navigation {
    height:60px;
    z-index:170;
    margin:0 auto;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Если меню находится под шапкой, то оно будет перекрывать заголовок. Что-бы избежать этого, добавьте ещё пару строчек:

.site-branding {
margin-top:60px;
}

Всё, меню ничего не загораживает. Не забудьте нажать Опубликовать.

Теперь попробуем сделать тоже самое с плагином. Устанавливаем myStickymenu обычным способом из админ-панели.

После активации попадаем в настройки плагина.
Устанавливаем основное меню в разделе Липкий класс и галочки на компьютере и мобильном. В разделе Settings можете настроить время перехода, эффект затухания, цвет фона и прозрачность фона.

Как видим, плагин позволяет сохранить расположение меню, если оно находиться ниже шапки сайта и открывает возможности внесения визуальных эффектов.
Выбор способа реализации липкого меню остается за вами, но при этом не будем забывать о нагрузке сайта лишними плагинами.

Поделиться ссылкой: