Стиль виджета пользовательского меню WordPress

Мне интересно, знает ли кто-нибудь лучший метод для разбиения 1 пользовательского виджета меню (расположенного в нижнем колонтитуле моих сайтов) на 2 столбца. Есть всего 8 ссылок, поэтому я хотел бы, чтобы он был разделен на 2 столбца из 4 ссылок. Не уверен, есть ли функция для этого или есть какой-то CSS для этого? Разметка HTML из виджета выглядит так:

<ul> <li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-133"> <a href="#">Link</a> </li> </ul> 

повторите эту структуру еще 7 раз для кода позиций.

Чисто с помощью CSS вы можете установить ширину для пунктов меню, поместить их, а затем установить UL в два раза:

 footer ul { width: 200px; } footer .menu-item { float: left; width: 100px } 

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

Вы можете назначить отдельные классы CSS элементам меню из настраиваемого меню навигации по http://example.com/wp-admin/nav-menus.php .

Итак, первые 4 ссылки будут иметь класс widget-left-column , а остальные – widget-right-column .
Таким образом, вы сможете делать свой материал CSS, чтобы разделить виджет на два столбца (строгие вопросы CSS вне темы в WordPress StackExchange) .

Присвоение классов CSS отдельным настраиваемым пунктам меню навигации

Вместо того, чтобы повторять те же скриншоты, я воспроизведу здесь @ ответ Джереми Джареда на аналогичный вопрос:

Сначала перейдите к параметрам экрана и установите флажок css:

включить классы меню навигации

Затем откройте пункт меню и дайте ему класс. В моем примере у него будет класс .home-page:

класс меню навигации


Обратите внимание, что для назначения более одного класса вы должны использовать пробел для их разделения.
навигационные меню нескольких классов
Это приводит к следующему Html:
введите описание изображения здесь

Упрощение

 footer .menu-item { width:50%; float: left; }