Как выбрать конкретные элементы списка в меню динамического загрузочного меню для WordPress

Question

Я создал динамическое навигационное меню для WordPress. Чтобы увидеть дизайн меню, перейдите по этой ссылке: https://dl.dropboxusercontent.com/u/211935016/images/created_menu.jpg

Но есть некоторые вещи, которые еще нужно сделать. Лучшие наглы «Особые Акции» и «Сертифицированные Советом» должны иметь такую ​​коробку вокруг них, чтобы они выделялись. Для того, чтобы увидеть дизайн, пожалуйста, перейдите по этой ссылке: https://dl.dropboxusercontent.com/u/211935016/images/original_menu.jpg

Вот HTML-код:

<!-- Menu's Code for Twitter Bootstrap --> 
<div class="navbar navbar-inverse container mainmenu" role="navigation"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle Naavigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="" >Navigation</a> 
</div> 
<div class="navbar-collapse collapse"> 
    <?php 

    $args = array(
      'theme_location' => 'top-bar', 
      'depth'   => 2, 
      'container'  => false, 
      'menu_class'  => 'nav navbar-nav', 
      'walker'   => new Bootstrap_Walker_Nav_Menu() 
    ); 
    wp_nav_menu($args); 

    ?> 
</div> 
</div> 
<!-- Menu's Code for Twitter Bootstrap --> 

Вот код CSS:

.mainmenu {background:#F2F0F1;border:none;margin-top:10px;margin-bottom:10px;} 
.navbar-inverse .navbar-brand {color: #101010;} 
.navbar-inverse .navbar-brand:hover {color: #101010;} 
.navbar-inverse .navbar-toggle {border-color: #333333;background:#333333;} 
.navbar-collapse {padding-right: 0px;padding-left: 0px;} 
.navbar-brand {display:none;} 
.mainmenu ul.navbar-nav {margin-left: -10px;} 
.mainmenu ul.navbar-nav li {margin-top: 12px;margin-left: 10px;} 
.mainmenu ul.navbar-nav li a {color:#101010;padding: 5px 2px;font-family: 'Open Sans', sans-serif;font-size:18px;} 
.mainmenu ul.navbar-nav li a:hover {color:#fff;background:#13B4E3;} 

И я использую этот код: HTTP:// pastebin dot com/S0UCDUYi в файле functions.php, чтобы активировать навигационное меню Bootstrap для WordPress.

Может ли кто-нибудь помочь мне исправить это? Спасибо.

Answer 1

Самый простой способ - добавить новый класс для этих двух пунктов меню на Wordpress | Внешний вид | Меню.

Чтобы убедиться, что вы можете просматривать классы меню CSS:

• Go страницу при редактировании меню
• Щелкните Параметры экрана в правом верхнем углу экрана
• В разделе «Показать дополнительные свойства меню» CLICK «Классы CSS»

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

Затем добавьте в CSS для этого нового класса:

.highlight { background: blue ... }