Nav bar color problems

Support
#1

www.grapelakesfarm.com

i have been having problems

i did the updates now the nave bar that displays my menu will not change color

my css reads as follows
custom back ground for site body needs to stay
i need all other top side and footer to be the green

please help

.site{
background-color:#e5dfec;
}
body:not(.home) .site{
background: url(‘http://www.grapelakesfarm.com/wp-content/uploads/2018/06/tan.jpg’);
background-size: cover;
}

.x-navbar .sub-menu {
background: #3cb44a !important;
color: #ffffff !important;
padding: 20px;
}
.x-navbar {
background-color: #3cb44a !important;
padding: 20px;
}

.x-btn-navbar {
background: #3cb44a !important;
color: #ffffff !important;
}
.x-btn-navbar:hover {
background: #3cb44a !important;
color: #ffffff !important;
}

.x-navbar .x-nav ul.sub-menu.collapse.in {
display: block !important;
}
.x-btn-navbar.collapsed {
background: #3cb44a !important;
color: #ffffff !important;
}
.x-btn-navbar.collapsed:hover {
background: #3cb44a !important;
color: #ffffff !important;
}
.x-topbar {

background: #3cb44a !important;
color: #ffffff !important;

padding: 50 !important;

}
.x-topbar .x-social-global{
margin-top: 50px;
}

footer {
background-color: #3cb44a !important;
padding: 0 !important;
}

#2

Hello @ctcn,

Thanks for asking. :slight_smile:

Upon inspecting your website I see two instances of custom CSS causing issues. Here is the CSS code.

.x-navbar, .x-navbar .sub-menu {
    background-color: #2c3e50 !important;
}
.x-navbar {
    background-color: #3cb44a !important;
    padding: 20px;
}

I think you are trying to have the green background color behind navbar. You need to remove first CSS that I have shared above and then automatically second one will take effect.

Please see the recorded screencast.

Thanks.

#3

this is all i have in css now on x theme styling options
still no luck

.site{
background-color:#e5dfec;
}
body:not(.home) .site{
background: url(‘http://www.grapelakesfarm.com/wp-content/uploads/2018/06/tan.jpg’);
background-size: cover;
}

.x-topbar {
background: #3cb44a !important;
color: #ffffff !important;
padding: 50 !important;

}
.x-topbar .x-social-global{
margin-top: 50px;
}

footer {
background-color: #3cb44a !important;
padding: 0 !important;
}

.x-navbar, .x-navbar .sub-menu {
background-color: #3cb44a !important;
}

#4

Hi again,

Please replace this part of your code:

.x-navbar, .x-navbar .sub-menu {
background-color: #3cb44a !important;
}

With this:

.masthead .x-navbar, .masthead .x-navbar .sub-menu {
    background-color: #3cb44a !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#5

perfect thank you very much

#6

You are welcome :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.