Как определить цвет панели навигации в CSS

Question

В настоящее время на моем сайте WordPress прозрачная навигация прозрачна на главной странице и на других страницах - белым фоном. Я попытался скопировать разделы из этого CSS в мой файл style.css дочерней темы и изменить шестнадцатеричные коды, но я не могу определить раздел кода, который мне нужен, чтобы изменить цвет.

Прозрачный:

Белый:

После редактирования .контейнер: введите описание изображения здесь

@media (min-width: 768px) {
    .nav > li > a:before {
        position: absolute;
        content: '';
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: #00aff2;
        -webkit-transition: all 1s;
        transition: all 1s;
    }
    .nav > li:hover > a:before {
        width: 100%;
        left: 0;
    }
    .navbar-nav > li > a {
        padding-top: 20px;
        padding-bottom: 20px;
        transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    }
    .shrink .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 14px;
    }
    .navbar-nav li:hover .dropdown-menu{
        visibility:visible;
        border-top: 4px solid #ccc;
        border-radius: 0;
        transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    }
    #site-navigation .container{
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        background-color: transparent;
    }
    .navbar-center .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar-center .menu-container {
        text-align: center;
    }
}
@media (min-width: 600px) {
    .admin-bar #site-navigation.shrink {
        top: 32px;
    }
}
@media (max-width: 767px) {
    .nav > li.active > a:after, .current-page-parent:after {
        height: 0 !important;
        background-color: transparent !important;
    }
    .navbar-nav a:hover, .navbar-nav a:focus {
        color: #ffffff !important;
        background-color: #000 !important;
    }
    .menu-container {
        width: 70%;
        position: absolute;
        left: 0;
        height: 100vh;
        transform: translate3d(-100%, 0, 0);
        overflow-y: auto;
        overflow-x: auto;
        background-color: #fff;
        top: 100%;
    }
    .openNav .menu-container {
        transform: translate3d(0, 0, 0);
        transition: transform 500ms ease;
    }
    .openNav .page-area {
        left: 0;
        transform: translate3d(70%, 0, 0);
        transition: transform 500ms ease;
    }
    .page-area {
        left: 0;
        transform: translate3d(0, 0, 0);
        transition: transform 500ms ease;
    }
    .navbar-nav {
        padding: 0;
        margin: 0;
    }
    .navbar-nav a {
        font-size: 14px;
        padding: 15px 10px !important;
        margin: 0 !important;
        line-height: 16px !important;
        background-color: white;
        float: left !important;
        margin: 0px !important;
        width: 100%;
        text-transform: none !important;
        word-wrap: break-word;
        white-space: normal !important;
    }
    .navbar-nav li, .navbar-nav ul {
        padding: 0px !important;
        margin: 0px !important;
    }
    .open-panel {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 18px;
        right: 22px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;

<nav class="navbar navbar-default navbar-fixed-top navbar-color-on-scroll navbar-transparent hestia_left">
						<div class="container">
				<div class="navbar-header">
					<div class="title-logo-wrapper">
						<a class="navbar-brand" href="http://localhost/wordpress/" title="">
							<img src="http://localhost/wordpress/wp-content/uploads/2018/09/cropped-hestia-header-2.jpg" alt=""></a>
					</div>
				</div>
									<div id="main-navigation" class="collapse navbar-collapse"><ul id="menu-navigation" class="nav navbar-nav navbar-right"><li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16 active"><a title="Home" href="http://localhost/wordpress">Home</a></li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a title="About Us" href="http://localhost/wordpress/about/">About Us</a></li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a title="Sponsorship" href="http://localhost/wordpress/sponsorship/">Sponsorship</a></li>
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a title="Blog" href="http://localhost/wordpress/blog/">Blog</a></li>
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a title="Contact" href="http://localhost/wordpress/contact/">Contact</a></li>
</ul></div><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navigation">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="sr-only">Toggle Navigation</span>
					</button>
								</div>

					</nav>

Answer 1

Удалить заголовок Навбар из всех или выбранных страниц или перекрасить их

На основании ваших комментариев:

Чтобы удалить заголовок навигации из темы, чтобы вставить свой собственный, вставьте это в свою дочернюю тему css.

.navbar  {display:none;}

В этом режиме реального времени я добавил его в пользовательский CSS, но он также будет работать в файле .css дочерней темы.

* Это удаляет область со всех страниц. Если вы хотите, чтобы он был удален только на главной странице, добавьте на эту страницу только CSS с этим кодом:

.home .navbar  {display:none;}

Для удаления фона с других страниц и box-shadow используйте этот код:

.navbar  {
    background:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

Чтобы изменить цвет фона навигации на страницах, используйте этот код:

.navbar  {
    background:#000;
}

или

.home .navbar  {
    background:#000;
}

Еще один способ удаления прозрачного заголовка навигации на домашней странице:

.navbar.navbar-transparent {
    display: none;
}

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

.home .navbar.navbar-transparent{
    background-colour: #FF0000;
}

---

Answer 2

Вам нужно добавить этот код в ваш файл header.php

if(is_home() || is_front_page()){
    ?>
    <style>
    .container{
        background-color:red;
    }
    </style>

<?php
}

замените этот header_element класс своим элементом заголовка.