0 Пользователей и 1 Гость просматривают эту тему.
  • 6 Ответов
  • 446 Просмотров
*

hottab_1

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Здравствуйте!
Есть сайт http://www.dvernoyclub.ru/, в меню, где идут пункты "Каталог товаров", "Акции и подарки" и так далее. Есть пункт (самый последний) "Купить в кредит". Для этого пункта нужно сделать совсем другое оформление.
Пробовал прописать отдельный класс в CSS, вывел его модулем в позицию меню, подогнал на нужное место, но появилась проблема, при изменении размера экрана блок уезжает, то есть он не ведет себя так, как ведет меню.
Подскажите, пожалуйста, как привязать свой класс к пункту меню, чтобы он не уезжал, а вел себя один в один как пункт меню. Или может есть какое-то другое решение?  !
Решение через ::before не подходит, так как в блоке будет картинка, текст и ссылка.
*

AlekVolsk

  • Гуру
  • 6542
  • 380 / 4
у пункта меню выведен отдельный класс, item-139, привяжитесь к нему, напрмер:
Код: css
.item-139 > a {
    background-color: #88c500;
    color: #fff;
}
.item-139 > a:hover, .item-139 > a:focus {
    background-color: #f00;
    color: #fff !important;
}

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

Biss

  • Давно я тут
  • 891
  • 92 / 0
Сделал немного по другому, без привязки к id. Редактирование пункта меню - во вкладке - параметры ссылки - CSS-класс ссылки, прописал sale
потом в CSS

.sale {
    background: #cd2626;
}

пример сайт в профиле
*

hottab_1

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
у пункта меню выведен отдельный класс, item-139, привяжитесь к нему, напрмер:
Код: css
.item-139 > a {
    background-color: #88c500;
    color: #fff;
}
.item-139 > a:hover, .item-139 > a:focus {
    background-color: #f00;
    color: #fff !important;
}

фон картинкой привязывайте именно к ссылке, сместить текст ссылки можно внутренними отступами и высотой строки (требуется подгонка по месту на разных экранах)
Я понял вас, спасибо.
А чтобы применить определенный стиль к тексту, конкретно в этой ссылке тоже нужно прописывать вот тут?
Код
.item-139 > a:hover, .item-139 > a:focus {
    background-color: #f00;
    color: #fff !important;
}
*

hottab_1

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Сделал немного по другому, без привязки к id. Редактирование пункта меню - во вкладке - параметры ссылки - CSS-класс ссылки, прописал sale
потом в CSS

.sale {
    background: #cd2626;
}

пример сайт в профиле
Стиль для текста тоже тут можно указать? И если сделать еще .sale:hover, будет работать?
*

Biss

  • Давно я тут
  • 891
  • 92 / 0
.sale a{
    color: #cd2626;
}
.sale a:hover{
    color: #cd2626;
}
возможно надо будет добавить !important и кроме того указывать родителя .nav li.sale a:hover как то так, но это надо пробовать
« Последнее редактирование: 01.07.2016, 17:37:24 от Biss »
*

hottab_1

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Хорошо, понял, спасибо.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Сортировка в меню (блог материалов) по кастомным полям

Автор beliyadm

Ответов: 9
Просмотров: 45
Последний ответ Сегодня в 20:26:52
от beliyadm
Ошибка в меню - после обновления до 3.8.10

Автор bas700

Ответов: 45
Просмотров: 4745
Последний ответ 20.11.2018, 21:25:58
от a159cm
Как изменить вид меню на сайте?

Автор elitbus

Ответов: 11
Просмотров: 227
Последний ответ 13.11.2018, 12:36:40
от elitbus
Правильно ли так делать мобильное меню

Автор ingavr

Ответов: 6
Просмотров: 166
Последний ответ 02.11.2018, 23:17:15
от ingavr
Встроенный компонент "Перенаправление" добавить в меню

Автор submaster

Ответов: 2
Просмотров: 660
Последний ответ 24.10.2018, 15:56:05
от submaster