Блог

У меня следующая проблема:

В моем меню (Обратные ссылки> Наши бестселлеры) есть заголовок. Я хотел бы сделать его белым. Но класс

«mega-block-title» ничего не изменит.

Я пытался:

 .mega-block-title {
    color: #ffffff
}  

Короткое использование грязного решения !important .

 .mega-block-title {
   color: white !important;
}
  

Чтобы сделать это чище, вы должны увидеть, где устанавливается цвет этого элемента, и изменить его, или добавить класс к этому элементу и переопределить это свойство. Это зависит от того, как теперь определяется цвет…

Если вы щелкните правой кнопкой мыши на этом элементе и выполните команду «Проверить элемент», вы увидите эти свойства CSS:

 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title {
    color: #555;
    font-family: inherit;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    text-align: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 5px 0px;
    vertical-align: top;
    display: block;
    visibility: inherit;
    border: 0;
}
  

Если вы узнаете, где это color: #555 определено, вы можете отредактировать его, но тогда это может повлиять и на другие элементы… Я не знаю, хотите ли вы этого…

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

 <h4 class="mega-block-title is-white">Unsere Bestseller:</h4>
  

а затем в CSS сделайте

 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title.is-white {
    color: white;
}