Удалить разделитель у последнего пункта меню

При создании сайта, в котором пункты меню разделены вертикальной линией или каким-то другим способом, возникает проблема — разделитель выводится и у последнего пункта. Как правило, разделитель задается css свойством border-right. Пример такой проблемы можно увидеть на скриншоте:

Меню с разделителями

Меню с разделителем

Сразу бросается в глаза разделитель после пункта Новости — он лишний. Убрать разделитель после последнего пункта меню оказалось довольно просто — установить в админке для этого пункта меню css класс, для которого запретить рамку — border:none.

Зайдем в админку сайта, перейдем в Внешний вид -> Меню. По умолчанию возможность добавить свой класс к пункту меню в WordPress отключена. Чтоб ее включить вверху щелкаем по кнопке Настройки экрана и ставим галочку напротив пункта Классы css

Включаем классы для пунктов меню

Как включить класс для пункта меню

Осталось добавить последнему пункту меню какой-либо класс (назвав его, например, menu-no-border), а затем в файле css темы добавить этот класс и прописать ему свойство border:none. В результате разделитель после последнего пункта меню исчезнет.

Меток нет. Похожие записи
Запись опубликована в рубрике WordPress, Создание сайтов. Добавьте в закладки постоянную ссылку.

3 комментария: Удалить разделитель у последнего пункта меню

  1. Антон говорит:

    Здравствуйте. Очень актуальная проблема, давно ищу решение! Не могли бы вы подсказать новичку, как это решение выглядит непосредственно в коде? Пробовал изменить класс в index.html ничего не поменялось, зашел в custom.css и не нашел где там поменять этот класс, помогите пожалуйста!

  2. Антон говорит:

    cms — Webasyst

    • kumatoz говорит:

      Извините, что долго не отвечал — лето )
      Посмотрел Ваш сайт. У Вас там разделитель задан не border’ом, а картинкой в background. Я вижу стиль для последнего пункта меня вы задали. Осталось вот в этом файле «wa-data/public/shop/themes/custom/theme.css» в конец добавить

      ul.menu-v li.menu-no-border{background:none}
      Успехов!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>