Color of header changing when stacked

Support
#1

I used code to make the header of my website the correct color:

.x-navbar {
background-color: #424787 !important;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu li > a:hover, .x-navbar .desktop .sub-menu li.x-active > a, .x-navbar .desktop .sub-menu li.current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a, .x-navbar .mobile .x-nav li.current-menu-item > a {
color: #424787 !important;
}

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: 0 2px 0 0 #292929;
}

This code works perfectly with the Inline option, but it doesn’t work once I change the header to stacked. Is there a way to fix this?

Thanks in advance!

#2

Hi Mike,

From you other thread, I have check your site. Are you referring to this site:

That site is now using MaxMegamenu and not the default X theme menu. That custom CSS code will only work for default X theme menu. Please clarify.

#3

I’m sorry. I guess I’m looking for a way to make the header the same color as the menu. So the white part will be blue.

Thank you.

#4

Hello @PacArc,

Thanks for updating thread.

Please add following CSS under X > Theme Options > CSS:

.x-topbar {
    background-color: #272727;
}

In case it does not work, please share website URL for us to take a closer look.

Thanks.

#5

It had no effect on the color and now the search bar I added is also not displaying where I need it to. :confused:

#6

Hi there,

Please try:

.x-logobar-inner {
    background-color: #424787;
}
1 Like
#7

It worked! Thanks so much! Is there a way to get my searchbar back in the correct place?

#8

Hi there,

Please add this code:

nav.x-nav-wrap.desktop {
    padding: 10px;
}

nav.x-nav-wrap.desktop .form-search {
    float: right;
    width: 40%;
}

#mega-menu-wrap-primary {
    float: left;
    clear: none;
}
1 Like
#9

Thank you so much!!

#10

You are most welcome. :slight_smile:

#11

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