смена цвета кнопок при наведении в woodmart

mrbakardi
(@mrbakardi)

4 года, 3 месяца назад

здравствуйте уважаемые разработчики!

использую в боковом сайдбаре виджет от woodmart- боковая панель Mega Menu
цвета заголовка и прочего отредактировать я смог, а вот с цветом и стилем при наведении возникают проблемы.
хотелось бы изменить цвет кнопки при наведении на нее, весь код облазил, а найти сам не могу.
и если можно сделать подчеркивание так, как сделано в шапке (например, при наведении на кнопку «доставка и оплата», оно реализовано в самих настройках темы) вообще было бы отлично.

и как можно в мобильной версии по умолчанию увеличить текст? слишком мелкий даже на iphone 6, 7+

адрес: все-пестициды.рф

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 15 ответов — с 1 по 15 (всего 17)

1 2 →

tuxfighter
(@tuxfighter)

4 года, 3 месяца назад

здравствуйте уважаемые разработчики!

Вы ошиблись адресом. Обратитесь туда, где купили эту премиум тему.
И правила форума за одно почитайте.

Автор mrbakardi
(@mrbakardi)

4 года, 3 месяца назад

речь идет о реализации данной задачи через правку стилей, а не самого виджета. в теме виджет не имеет настроек.
fevenili
(@fevenili)

4 года, 3 месяца назад
а вот с цветом и стилем при наведении возникают проблемы

В дополнительные стили попробуйте добавить:
```
.vertical-navigation .item-level-0:hover > a {
  background-color: #B51C1C;
  color: #fffefe;
}
```
tuxfighter
(@tuxfighter)

4 года, 3 месяца назад

речь идет о реализации данной задачи через правку стилей, а не самого виджета

А у нас тут форум по ВП, а не по CSS
fevenili
(@fevenili)

4 года, 3 месяца назад
можно сделать подчеркивание

Попробуйте так:
```
.vertical-navigation .item-level-0:hover > a {
	background-color: #B51C1C;
	color: #fffefe;
  display: block;
}

.vertical-navigation .item-level-0:hover > a > span {
  display: block;
  position: relative;
}

.vertical-navigation .item-level-0 > a > span:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  transition: width .7s cubic-bezier(.175,.885,.32,1.15);
  width: 0%;
  height: 2px;
  background-color: #fffefe;
}

.vertical-navigation .item-level-0:hover > a > span:after {
  width: 100%;
}
```
fevenili
(@fevenili)

4 года, 3 месяца назад
как можно в мобильной версии […] увеличить текст

Размер шрифта в названии товара:
```
@media (max-width: 1024px){
  wc-block-grid__product-title{
    font-size: 13px;
  }
}
```
Автор mrbakardi
(@mrbakardi)

4 года, 3 месяца назад

@fevenili , все чудесно работает, огромное спасибо!
единственное что, как увеличить сам текст описания я еще в процессе поиска)

как бы Вам в благодарность выдать персональный промокод на скидку в магазине, тут нет переписок, а скидывать в паблик- такое себе

Автор mrbakardi
(@mrbakardi)

4 года, 3 месяца назад

@fevenili , пытаюсь «вычленить» только подчеркивание для кнопок (с цветом что-то не очень выходит красиво), без строчек про заливку кнопок скрипт не работает, это поправимо?
fevenili
(@fevenili)

4 года, 3 месяца назад
пытаюсь «вычленить» только подчеркивание

Вместо ранее предложенного варианта попробуйте следующее:
```
.vertical-navigation .item-level-0:hover > a {
  /* background-color: #B51C1C; */
  /* color: #fffefe; */
  display: block;
}

.vertical-navigation .item-level-0:hover > a > span {
  display: block;
  position: relative;
}

.vertical-navigation .item-level-0 > a > span:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  transition: width .7s cubic-bezier(.175,.885,.32,1.15);
  width: 0%;
  height: 2px;
  background-color: #f63c38;
}

.vertical-navigation .item-level-0:hover > a > span:after {
  width: 100%;
}
```
fevenili
(@fevenili)

4 года, 3 месяца назад
Вместо
```
@media (max-width: 1024px){
  wc-block-grid__product-title{
    font-size: 13px;
  }
}
```
попробуйте:
```
@media (max-width: 1024px){
  .wc-block-grid__product-title{
    font-size: 13px;
  }
}
```
Автор mrbakardi
(@mrbakardi)

4 года, 3 месяца назад

@fevenili меню работает, правда снизу «артефакт» в виде анимации полосы в обратном порядке под последним пунктом меню.
в разделах статей текст не увеличился, а вот товарный- только заголовки, но текст описания товаров тоже остался на месте
fevenili
(@fevenili)

4 года, 3 месяца назад
снизу «артефакт»

Попробуйте такой вариант:
```
.vertical-navigation .item-level-0:hover > a {
  /* background-color: #B51C1C; */
  /* color: #fffefe; */
  display: block;
}

.vertical-navigation .item-level-0 > a > span {
  display: block;
  position: relative;
}

.vertical-navigation .item-level-0 > a > span::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  transition: width .7s cubic-bezier(.175,.885,.32,1.15);
  width: 0%;
  height: 2px;
  background-color: #f63c38;
}

.vertical-navigation .item-level-0:hover > a > span::after {
  width: 100%;
}
```
Автор mrbakardi
(@mrbakardi)

4 года, 3 месяца назад

@fevenili , сработало, спасибо огромное!)

Автор mrbakardi
(@mrbakardi)

4 года, 3 месяца назад

@fevenili , а что с размером текста?) подскажете?)
fevenili
(@fevenili)

4 года, 3 месяца назад
Для изменения размера текста попробуйте:
```
@media (max-width: 1024px){
  body{
    font-size: 16px !important;
  }
}
```