Наложение элементов в Breadcrumb

[volkiran]

Всех приветствую! Скорее всего проблема давно известна, но найти решение мне не удалось.
Если пункты в хлебных крошках не влезают в одну строку (особенно актуально для мобильных), то происходит наложение разделителя пунктов Breadcrumb на текст и другие разделители. Каким образом можно исправить стили элементов?
Выглядит это так:

[Tom]

Ссылка скажет и поможет больше любых скринов.

Змінено 24 лютого 2020 користувачем Tom

[AUSS]

52 минуты назад, volkiran сказал:

Всех приветствую! Скорее всего проблема давно известна, но найти решение мне не удалось.
Если пункты в хлебных крошках не влезают в одну строку (особенно актуально для мобильных), то происходит наложение разделителя пунктов Breadcrumb на текст и другие разделители. Каким образом можно исправить стили элементов?
Выглядит это так:

Решение бесплатно в личку

[volkiran]

14 минут назад, Tom сказал:

Ссылка скажет и поможет больше любых скринов.

Вот сайт https://stroi-trade.com/
Если открыть со смартфона, то хлебные крошки будут в несколько строк.

[Tom]

Я бы их в вашем случае в мобильной версии вообще убрал.

Сюда /catalog/view/theme/default/stylesheet/stylesheet.css
Добавить в конец самый 

@media (max-width: 480px) {.breadcrumb {display:none;}}

Ну и потом не забыть сбросить кэши все.

[AUSS]

34 минуты назад, Tom сказал:

Я бы их в вашем случае в мобильной версии вообще убрал.

Сюда /catalog/view/theme/default/stylesheet/stylesheet.css
Добавить в конец самый 

@media (max-width: 480px) {.breadcrumb {display:none;}}

Ну и потом не забыть сбросить кэши все.

ага очень круто )

попадаешь в товар с телефона - и думаешь глянуть что еще есть в этой категории но не можешь тк как крошек нет и выходишь назад в гугл

Решение гениальное)))

[Dimasscus]

30 минут назад, AUSS сказал:

ага очень круто )

попадаешь в товар с телефона - и думаешь глянуть что еще есть в этой категории но не можешь тк как крошек нет и выходишь назад в гугл

Решение гениальное)))

серьезно? навигация по товарам с телефона при помощи хлебных крошек? всегда так делаете? :))

 

для ТС - посмотрите как на Розетке сделано- возможно подойдет

[Tom]

28 минут назад, AUSS сказал:

ага очень круто )

попадаешь в товар с телефона - и думаешь глянуть что еще есть в этой категории но не можешь тк как крошек нет и выходишь назад в гугл

Решение гениальное)))

Речь о мобильной версии. Ничего гениального не вижу.

[AUSS]

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

Так что совет в корне не правильный

[Tom]

Здесь основная мысль моя

1 час назад, Tom сказал:

в вашем случае

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

Ещё как вариант, можно в мобильной версии отображать категорию товара, вместо ХБ , что бы вернуться в список товаров. Просто мне кажется любое решение на css не особо поможет в этом конкретном случае.

[AUSS]

1 час назад, Tom сказал:

Здесь основная мысль моя

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

Ещё как вариант, можно в мобильной версии отображать категорию товара, вместо ХБ , что бы вернуться в список товаров. Просто мне кажется любое решение на css не особо поможет в этом конкретном случае.

2 строки кода в css - дают отличное решение

не правда ли volkiran ?

https://prnt.sc/r6uodw

 

 

[Blast]

1 час назад, AUSS сказал:

2 строки кода в css - дают отличное решение

не правда ли volkiran ?

https://prnt.sc/r6uodw

 

 

что за секретность? как будто супер уникальное решение.

Как вариант убрать вертикальные отступы у ul, добавить их для li и подвинуть разделители

.breadcrumb {
	padding: 0;
}
.breadcrumb > li {
	padding: 10px 20px;
}
.breadcrumb > li::after {
	top: 8px;
}

точные значения можно поварьировать

[AUSS]

53 минуты назад, Blast сказал:

что за секретность? как будто супер уникальное решение.

Как вариант убрать вертикальные отступы у ul, добавить их для li и подвинуть разделители

.breadcrumb {
	padding: 0;
}
.breadcrumb > li {
	padding: 10px 20px;
}
.breadcrumb > li::after {
	top: 8px;
}

точные значения можно поварьировать

вообще дичь а не решение)

[LiLu]

@AUSS а что вы ТС'у в ответ на это сообщение ответили, если это тоже не секрет фирмы?

1. Ни в коем случае!!11! Это супер-секрет!
2. Я сам выложу, только немного попонтуюсь
3. Я попонтуюсь, а решение все-равно не выложу
4. Ваш вариант

?

 

[volkiran]

1 час назад, Blast сказал:

что за секретность? как будто супер уникальное решение.

Как вариант убрать вертикальные отступы у ul, добавить их для li и подвинуть разделители

.breadcrumb {
	padding: 0;
}
.breadcrumb > li {
	padding: 10px 20px;
}
.breadcrumb > li::after {
	top: 8px;
}

точные значения можно поварьировать

Данное решение использовал без каких-либо правок, смотрится хорошо, благодарю!

[volkiran]

2 часа назад, AUSS сказал:

2 строки кода в css - дают отличное решение

не правда ли volkiran ?

https://prnt.sc/r6uodw

 

 

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

[Blast]

1 час назад, AUSS сказал:

вообще дичь а не решение)

обоснуйте. не кроссбраузерно? Костыль? Потенциально в каких-то условиях не будет работать?

нет. всё будет норм.

приведите ваше гениальное решение, мы все посмотрим и восхитимся

1 час назад, volkiran сказал:

Данное решение использовал без каких-либо правок, смотрится хорошо, благодарю!

пожалуйста

1 час назад, volkiran сказал:

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

если не секрет, то почему не одобрил?

[gonzer]

может кому пригодится

1. Убираем ссылку на последний пункт меню и избавляемся от <li> списка.

Меняем

  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %} 
  </ul>

на

<div class="breadcrumb">
    {% for key, breadcrumb in breadcrumbs %}
    {% if key + 1 < breadcrumbs|length %}
        <span><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></span>
    {% else %}
        <span class ="breadlast">{{ breadcrumb.text }}</span>
    {% endif %}
{% endfor %}
  </div>

2. Добавляем стили в css

.breadcrumb {
    margin: 0 0 20px 0;
    padding: 5px 5px 5px 10px;
    border: 1px solid #ddd;
}
.breadcrumb span::after {
    content: '»';
    padding: 0 3px 0 7px;
}
.breadlast::after {
    display: none;
}

получаем

 

 

цвета и фон правим под себя

Змінено 18 квітня 2021 користувачем gonzer