Некорректное отображение пунктов меню

@ramapriya · Регистрация: 07.03.2018

Author24 — интернет-сервис помощи студентам

Всем привет!

верстаю тему на WP, столкнулся со следующей проблемой (одной из многих)

В исходной вёрстке меню отображается нормально, когда натягиваю на ВП, отступы между пунктами куда-то исчезают

Исходная вёрстка: https://katunfm.000webhostapp.com
Меню на ВП:

Код менюшки на ПХП

PHP
1
2
3
4
5
6
7
8
9
<?php wp_nav_menu([
                    'theme-location' => 'primary',
                    'container'      => FALSE,
                    'menu_class'     => 'navbar-nav ml-auto p-2',
                    'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                    ]
 
 
                );?>

Код менюшки на ХТМЛ

HTML5
1
2
3
4
5
6
7
8
<ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a href="index.html" class="nav-link">Главная</a></li>
                   <li class="nav-item"><a class="nav-link"href="about.html">О нас</a></li>
                    <li class="nav-item"><a class="nav-link" href="djs.html">Ведущие</a></li>
                   <li class="nav-item"><a class="nav-link" href="show.html">Программы</a></li>
                   <li class="nav-item"><a href="broadcast.html" class="nav-link">Диапазон вещания</a></li>
                   <li class="nav-item"><a href="contacts.html" class="nav-link">Контакты</a></li>
                </ul>

Как говорится, то ли лыжи не едут, то ли я чего-то не догоняю...

Добавлено через 1 час 0 минут
В WP_Kama встречал какой-то параметр Walker, может, там все необходимые стили и функции нужно прописывать?

@Fedor92 · 10.03.2018, 09:58

ramapriya, дайте лучше ссылку на отредактированное меню вместо скриншота... Кстати, скрины на форум загружаем!

@ramapriya · 12.03.2018, 07:30 **[ТС]**

Ссылка: http://katunfm.000webhostapp.com/wp/ (вёрстка пока ещё не до конца натянута)
Код на гитхабе https://github.com/stayfuneral... header.php

Стили на всякий случай https://github.com/stayfuneral... /style.css

Добавлено через 43 минуты
Ещё одна проблема... добавил меню в футер, точки маркированного списка убрать удалось, но отступы никуда не уходят, хотя прописал для них padding-left: 0 в style.css

@Fedor92 · 12.03.2018, 09:46

ramapriya, давайте теперь посмотрим...

Код оригинального меню:

Ваше меню:

На лицо различные классы как у пунктов меню, так и у ссылок...

В оригинале у ссылок в меню есть класс nav-link, который создаёт отступы между пунктами меню и не даёт им слипаться...

У Вас его в вёрстке нет... Делаем выводы и правим...

@ramapriya · 12.03.2018, 09:58 **[ТС]**

Fedor92, я это понимаю, но мне неясно, как этот класс добавить в массив меню

@Fedor92 · 12.03.2018, 10:43

ramapriya, каким кодом Вы его выводите?

@ramapriya · 12.03.2018, 10:52 **[ТС]**

PHP
1
2
3
4
5
6
7
8
9
<?php wp_nav_menu([
                    'theme-location' => 'primary',
                    'container'      => FALSE,
                    'menu_class'     => 'navbar-nav ml-auto',
                    'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                    ]
 
 
                );?>

@Fedor92 · 12.03.2018, 10:56

ramapriya, это вывод только тега списка, а не пунктов... Это во-первых... Во-вторых, если Вам сложно разбираться в коде, то можно просто переписать стили из оригинального меню для своих пунктов, при этом классы, заменив на селекторы, к примеру:

CSS
1
2
3
.navbar-nav ml-auto li a{
// Какие-то стили
}

@ramapriya · 12.03.2018, 11:23 **[ТС]**

Во-вторых, если Вам сложно разбираться в коде, то можно просто переписать стили из оригинального меню для своих пунктов, при этом классы, заменив на селекторы, к примеру:

Так вордпресс же сам подставляет свои классы в меню, в этом и проблема

Или navbar-nav заменить на menu-item?

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

Добавлено через 10 минут
Проблема решена с помощью функции

PHP
1
2
3
4
5
6
function add_class_to_all_menu_anchors( $atts ) {
    $atts['class'] = 'nav-link';
 
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_all_menu_anchors', 10 );

@Fedor92 · 12.03.2018, 11:28

Сообщение от ramapriya

Проблема решена с помощью функции

Рад за Вас...

@ramapriya · 12.03.2018, 11:46 **[ТС]**

Fedor92, спасибо!

Правда, с решением одной проблемы появилась другая - в футере отступы между меню стали слишком большие
Вот уж действительно, чем больше ответов, тем больше вопросов

Соответственно, код в футере следующий:

PHP
1
2
3
4
5
6
<?php wp_nav_menu([
                            'theme-location'    => 'footer',
                            'container'         => FALSE,
                            'menu class'        => 'bottom-menu',
                            'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                        ]);?>

выводит вот что:

а должно быть вот так:

ну и код вёрстки, соответственно:

HTML5
1
2
3
4
5
6
7
8
<ul class="bottom-menu">
                            <li>Главная</li>
                            <li>О нас</li>
                            <li>Ведущие</li>
                            <li>Программы</li>
                            <li>Диапазон вещания</li>
                            <li>Контакты</li>
</ul>

Т.е. ничего сверхъестественного на этот раз. Но, тем не менее, мало того, что WP добавляет класс .nav-link (что, в принципе, понятно), так ещё и маркеры списка убирать не хочет, хотя в стилях ясно написано

CSS
1
2
3
4
footer .bottom-menu {
    list-style: none;
    padding: 0;
}

@Fedor92 · 12.03.2018, 12:06

Сообщение от ramapriya

так ещё и маркеры списка убирать не хочет, хотя в стилях ясно написано

Значит у Вас перекрытие стилей идёт... Попробуйте добавить к стилям !important? в случае с отступами в меню аналогично, раз уж у Вас одним кодом генерируется два меню...

@ramapriya · 12.03.2018, 12:22 **[ТС]**

Попробуйте добавить к стилям !important? в случае с отступами в меню аналогично, раз уж у Вас одним кодом генерируется два меню

А вот здесь, если можно, подробнее, пожалуйста....

После добавления

CSS
1
2
3
4
footer .nav-link {
    list-style-type: none!important;
    padding: 0!important;
}

отступы исчезли, но маркеры по-прежнему присутствуют

@Fedor92 · 12.03.2018, 12:30

CSS
1
2
3
footer .menu{
list-style:none !important
}

Неужели не работает?

@ramapriya · 12.03.2018, 12:38 **[ТС]**

Fedor92,

маркеры исчезли после

CSS
1
2
3
4
5
6
7
8
9
footer ul li {
    list-style: none !important;
    padding: 0 !important;
}
 
footer .nav-link {
    
    padding: 0 !important;
}

однако отступы слева остались....

боже мой, неужели это со мной что-то не то....

@Fedor92 · 12.03.2018, 12:52

CSS
1
2
3
4
footer ul {
    margin: 0 !important;
    padding: 0 !important;
}

@ramapriya · 13.03.2018, 11:19 **[ТС]**

Fedor92, спасибо, заработало!

Новые блоги и статьи Все статьи Все блоги /
sshd restrictions, ssh access limitations jigi33 26.03.2025 sshd restrictions \| ssh access limitations рестрикции доступа на сервер sshd статья: https:/ / www. golinuxcloud. com/ restrict-allow-ssh-certain-users-groups-rhel	Компиляция C++ с Clang API NullReferenced 24.03.2025 Компиляторы обычно воспринимаются как черные ящики, которые превращают исходный код в исполняемые файлы. Мы запускаем компилятор командой в терминале, и вуаля — получаем бинарник. Но что если нужно. . .	Многопоточное программирование в C#: Класс Thread UnmanagedCoder 24.03.2025 Когда запускается приложение на компьютере, операционная система создаёт для него процесс - виртуальное адресное пространство. В C# этот процесс изначально получает один поток выполнения — главный. . .	SwiftUI Data Flow: Передача данных между представлениями mobDevWorks 23.03.2025 При первом знакомстве со SwiftUI кажется, что фреймворк предлагает избыточное количество механизмов для передачи данных: @State, @Binding, @StateObject, @ObservedObject, @EnvironmentObject и другие. . . .	Моки в Java: Сравниваем Mockito, EasyMock, JMockit Javaican 23.03.2025 Как протестировать класс, который зависит от других сложных компонентов, таких как базы данных, веб-сервисы или другие классы, с которыми и так непросто работать в тестовом окружении? Для этого и. . .
Архитектурные паттерны микросервисов: ТОП-10 шаблонов ArchitectMsa 22.03.2025 Популярность микросервисной архитектуры объясняется множеством важных преимуществ. К примеру, она позволяет командам разработчиков работать независимо друг от друга, используя различные технологии и. . .	Оптимизация рендеринга в Unity: Сортировка миллиона спрайтов GameUnited 22.03.2025 Помните, когда наличие сотни спрайтов в игре приводило к существенному падению производительности? Время таких ограничений уходит в прошлое. Сегодня геймдев сталкивается с задачами совершенно иного. . .	Образование и практика Igor3D 21.03.2025 Добрый день А вот каково качество/ эффективность ВУЗовского образования? Аналитическая геометрия изучается в первом семестре и считается довольно легким курсом, что вполне справедливо. Ну хорошо,. . .	Lazarus. Таблица с объединением ячеек. Massaraksh7 21.03.2025 Понадобилась представление на экране таблицы с объединёнными ячейками. И не одной, а штук триста, и все разные. На Delphi я использовал для этих целей TStringGrid, и то, кривовато получалось. А в. . .	Async/await в Swift: Асинхронное программирование в iOS mobDevWorks 20.03.2025 Асинхронное программирование долго было одной из самых сложных задач для разработчиков iOS. В течение многих лет мы сражались с замыканиями, диспетчеризацией очередей и обратными вызовами, чтобы. . .

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	10.03.2018, 09:58
	ramapriya, дайте лучше ссылку на отредактированное меню вместо скриншота... Кстати, скрины на форум загружаем! 0

@ramapriya 0 / 0 / 0 Регистрация: 07.03.2018 Сообщений: 15
	12.03.2018, 07:30 [ТС]
	Ссылка: http://katunfm.000webhostapp.com/wp/ (вёрстка пока ещё не до конца натянута) Код на гитхабе https://github.com/stayfuneral... header.php Стили на всякий случай https://github.com/stayfuneral... /style.css Добавлено через 43 минуты Ещё одна проблема... добавил меню в футер, точки маркированного списка убрать удалось, но отступы никуда не уходят, хотя прописал для них padding-left: 0 в style.css 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.03.2018, 09:46
	ramapriya, давайте теперь посмотрим... Код оригинального меню: Ваше меню: На лицо различные классы как у пунктов меню, так и у ссылок... В оригинале у ссылок в меню есть класс nav-link, который создаёт отступы между пунктами меню и не даёт им слипаться... У Вас его в вёрстке нет... Делаем выводы и правим... 0

@ramapriya 0 / 0 / 0 Регистрация: 07.03.2018 Сообщений: 15
	12.03.2018, 09:58 [ТС]
	Fedor92, я это понимаю, но мне неясно, как этот класс добавить в массив меню 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.03.2018, 10:43
	ramapriya, каким кодом Вы его выводите? 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.03.2018, 11:28
	Сообщение от ramapriya Проблема решена с помощью функции Рад за Вас... 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.03.2018, 12:06
	Сообщение от ramapriya так ещё и маркеры списка убирать не хочет, хотя в стилях ясно написано Значит у Вас перекрытие стилей идёт... Попробуйте добавить к стилям !important? в случае с отступами в меню аналогично, раз уж у Вас одним кодом генерируется два меню... 0

@ramapriya 0 / 0 / 0 Регистрация: 07.03.2018 Сообщений: 15
	13.03.2018, 11:19 [ТС]
	Fedor92, спасибо, заработало! 0