Как редактировать меню в заголовке - wordpress

Question

Мне нужна помощь в том, как начать редактирование заголовка на моем сайте wordpress. Я использую Google Chrome и инструмент для разработчиков. Я немного потерял, как выбрать свойства css и самостоятельно отредактировать их и буду признателен за помощь.

The URL to my site Я хочу, чтобы это выглядело как wordpress header

При наведении на нее, я хочу, чтобы отобразить непрозрачности и при нажатии на него, я хочу, чтобы пометить весь «квадрат».

CSS-я использую для моего меню есть:

.navbar-nav > li > a { 
color: #fff; 
text-transform: uppercase; 
font-weight: bold; 
font-family: inherit; 
font-size: 12px; 
line-height: 15px; 
} 

.navbar-nav > li > a:hover { 
background: rgba(255, 255, 255, 0.8); 
transition: background 0.3s; 
} 

.navbar-nav > li.active > a { 
background: rgba(255, 255, 255, 0.8); 
} 

Answer 1

Удалить запас из-элементов

.navbar-nav > li > a { 
color: #fff; 
text-transform: uppercase; 
font-weight: bold; 
font-family: inherit; 
font-size: 12px; 
line-height: 15px; 
} 

После того, как вы наведете навигационный элемент вы добавляете пол прозрачного фона. Вы также можете добавить переход, чтобы добавить анимацию «fade».

#wpo-mainnav.navbar ul.nav > li:hover > a { 
background: rgba(255, 255, 255, 0.8); 
transition: background 0.3s; 
} 

Чтобы отметить текущую категорию, просто добавьте фон к этому элементу.

#wpo-mainnav.navbar ul.nav > li.active > a { 
background: rgba(255, 255, 255, 0.8); 
} 

* EDIT *

Ваши навигационные элементы имеют: активный стиль, попробуйте добавить следующее:

.navbar-default .navbar-nav > li > a:active { 
color: #434a54; 
} 

Stylesheets используется:

Answer 2

цвет фона, который вы хотите изменить это на элемент списка (li) не якорный элемент (a). Я предполагаю, что вы можете использовать элемент привязки, но он не занимает всю высоту вашей панели навигации, и это может быть не так, как вы хотите. WordPress добавит класс .active к пункту меню, который соответствует текущей странице.

#main-menu > li:hover, 
#main-menu > .active { 
    background-color: #8ACEEC; 
} 

В качестве примечания, попробуйте использовать !important экономно. Он должен быть более или менее использован только в качестве крайней меры.