Docs

[TheDude]

Hi there,

I can’t figure this one out:

Desktop: I have a transparant header and when scrolling down it turns solid white – works like a charm
Mobile menu is also transparant when uncollapsing but you can’t read it so I want a solid white background.
I’ve been checking the forum here and tried some solutions but nothing is working.

This is my current css (took some examples from the forum) so it may be messy hence the correct code for the white background for mobile isn’t working.

Please let me know what I should do

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

.x-navbar {
position:absolute;
width:100%;
height: 60px;
background-color: transparent !important;
box-shadow: none;
border: 0;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}

.x-navbar-wrap {
height: auto !important;
}

.x-navbar {
background-color: rgba(255, 255, 255, 0.7) !important;
border:0;
box-shadow:none;
position: fixed;
width:100%;
}

.x-navbar-solid {
background-color:white;
}

.x-btn-navbar.collapsed {
color: #336699;
}
.x-btn-navbar.collapsed:hover {
color: #659812;
}
.x-btn-navbar {
color: #849562;
}
.x-btn-navbar:hover {
color: #224488;
}

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[TheDude]

This reply has been marked as private.

[Rahul]

Hey There,

Thanks for writing in!

It seems your site is under construction mode. Kindly send us your site’s WP Login Credentials so that we can take a closer look of the situation.

Thanks for understanding!

[TheDude]

This reply has been marked as private.

[Paul R]

Hi,

We still can’t access your home page.

Plesae provide us your wordpress admin login.

Thanks

[TheDude]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove height property from following code :

.x-navbar {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 0;
    box-shadow: none;
    position: fixed;
    width: 100%;
    height: 60px;
}

Hope it helps.

[TheDude]

removed but now my header is black and I want it to be solid white
Don’t understand why menu is black

[TheDude]

leave it, i solved it thanks

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
   body .x-navbar {
       height:auto !important;
   }
}

Hope that helps.

[TheDude]

This reply has been marked as private.

[Jade]

Hi there,

Please update this code:

@media (max-width: 979px) {
   body .x-navbar {
       height:auto !important;
   }
}

to

@media (max-width: 979px) {
   body .x-navbar {
       height:auto !important;
   }

   .x-navbar-inner {
       background-color: #fff;
    }
}

Hope this helps.

[TheDude]

Hi, so here’s what I have now and all works fine (to help others)

/* Nav */
.x-navbar {
border-bottom: 1px solid #000;
background-color: rgba(255, 255, 255, 0.9 );
max-height: 80px;
}
.x-navbar-solid {
background-color: #fff !important;
}
/*.x-navbar .sub-menu {
background-color: #fafafa;
}*/
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}
.x-navbar-wrap {
height: auto !important;
}

.x-btn-navbar.collapsed {
color: #336699;
}
.x-btn-navbar.collapsed:hover {
color: #659812;
}
.x-btn-navbar {
color: #849562;
}
.x-btn-navbar:hover {
color: #224488;
}

.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 {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

//mobile menu color
.x-nav-wrap.mobile.collapse.in {
display: block;
background-color: rgba(255,255,255, 0.9);
padding-left: 20px;
}

@media (max-width: 979px) {
body .x-navbar {
height:auto !important;
}
.x-navbar-inner {
background-color: #fff;
}
}

.x-navbar .mobile .x-nav ul li a span {
color: #000;
}
.x-navbar .mobile .x-nav ul li a {
border-color: #000;
}

[Paul R]

Thanks for sharing. Have a nice day!

[Author]

Posts