Блог

Главная - Вопросы по программированию - Измените выравнивание главного меню в теме Avada WordPress

Измените выравнивание главного меню в теме Avada WordPress

#php #css #wordpress #wordpress-theming

Вопрос:

Я хочу изменить главное меню темы Avada WordPress в заголовке, чтобы оно было выровнено по левому краю, а не по правому,

это похоже на следующее: введите описание изображения здесь

и я хочу, чтобы все было так: введите описание изображения здесь

Как я могу это сделать в CSS?

Примечания:

Я сделал это с помощью CSS, но проблема в том, что он работает не во всех размерах экрана, когда я его тестировал, я сделал это с помощью этого кода:

  .fusion-main-menu {
    position:static; 
    text-align:left;
    margin-left: 0px;
    margin-right: 30%; 
    margin-top:4px; 
}

но это не сделано, он выровнен по левому краю с одинаковым пространством во всех размерах экрана 🙁

Ответ №1:

В Avada есть возможность создать «Конструктор макетов». С помощью этой опции вы можете создать глобальный заголовок с помощью редактора страниц avada в соответствии с вашими потребностями. И держите кнопку на стороне навигации, чтобы сохранить левое правое положение. введите описание изображения здесь

Использование только CSS : Используйте .fusion-main-menu { float: left; padding-left: 50px; } и используйте JS, чтобы вывести последнюю кнопку из тега навигации. и примените float:прямо к этой кнопке.

jQuery( ".fusion-main-menu li:last-child" ).wrap("<div class='cst_btn'></div>"); jQuery(".cst_btn").insertAfter(".fusion-main-menu"); Убедитесь, что у вас есть меню с классом «.fusion-главное меню» только один раз на странице, в противном случае используйте класс diff или идентификатор.

Комментарии:

1. Я сделал это, но это не работает с мега-меню, используемым в разделе «Услуги», это скрытое мега-меню, также я использую плагин Max Mega menu, и если я использовал пользовательский заголовок, он включит его, поэтому я хочу сделать это с помощью CSS

2. Кроме того, я сделал это с помощью CSS, но проблема в том, что он работает не во всех размерах экрана, когда я его тестировал, я сделал это: .fusion-главное меню { позиция:статическая; выравнивание текста:слева; поле слева: 0 пикселей; поле справа: 30%; поле сверху:4 пикселя; } но оно не исправлено выровнено по левому краю с одинаковым пространством во всех размерах экрана 🙁 как я могу это исправить?

3. Используйте .fusion-главное меню { float: слева; отступ слева: 50 пикселей; } и используйте JS, чтобы вывести последнюю кнопку из тега навигации. и примените float:прямо к этой кнопке. Для этого нужен JS?

4. Спасибо! это работает для CSS, и, пожалуйста, если вы можете помочь мне с JS, я не знаю, как это сделать

5. jQuery( «.fusion-главное меню li:последнее дочернее» ).перенос(«<div class=’cst_btn’><div class=’cst_btn’></div>»); jQuery(«.cst_btn»).Вставка после(«.fusion-главное меню»); Убедитесь, что у вас есть меню с классом «.fusion-главное меню» только один раз на странице, в противном случае используйте класс diff или идентификатор.

Метки: