Transparent Header not working on home page

Support
#1

Hi Support,

I have set up a transparent header on my site that then changes to a white background but for some reason it is no longer working. It worked fine and works fine on the other pages but not the home page now for some reason.

Please advise?

#2

Hi Craig,

Thanks for writing in and the URL!

I can see the below CSS is not loading for your home page.

@media (min-width: 979px){
.x-navbar {
    background: transparent;
    border: none;
    box-shadow: none;
}
.x-navbar.x-navbar-solid {
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
}

But it loading for another page.
Look like you may have added the CSS to specific page CSS instead of the global CSS.
Please check and add this to Theme option -> CSS so that it would work for homepage too.

Hope this helps!

#3

Hi Basanta,

This is set in the global CSS.

So unfortunately this doesnt help.

#4

Hi Craig,

Thanks for the details!
I can see you have activated uber menu, Can you please confirm on this.

Thanks

#5

Hi Basanta,

Yes i have activated ubermenu which unfortunately doesn’t give me the scroll option that i am looking for. so have set the ubermenu to transparent so i can keep using the scroll changing colour.

#6

Hello Craig,

This custom css usually goes with a Javascript:

@media (min-width: 979px){
.x-navbar {
    background: transparent;
    border: none;
    box-shadow: none;
}
.x-navbar.x-navbar-solid {
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}
}

The JS code should be added in please in the Theme Options > Global JS (http://prntscr.com/evswzb)

jQuery(document).ready(function($) {

var $body = $('body');
var $navbar = $('.x-navbar');

if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {

$(window).scroll(function() {

  if ( $(this).scrollTop() >= 350 ) {
    $navbar.addClass('x-navbar-solid');
  } else {
    $navbar.removeClass('x-navbar-solid');
  }

});
}

});

And then go to Appearance > Ubermenu > Main UberMenu Configuration > Style Customizations and make sure that the ubermenu background color is set to transparent.

Hope this helps. Please let us know how it goes.

#7

Hi RueNel,

Thank you but i fear there is a far bigger issue as the styling in the CSS displays fine while in the customiser but not when viewing the page live. Cornerstone is also not allowing us to edit the elements on the home page either.

Eg the footer background is red but then when viewing the page live its white? The CSS is:
.x-colophon {
background-color:#fe0000 !important;
}

#8

Hi Craig,

I don’t see white background in live page, it’s the same red as in customizer view. And your CSS is this which works

.x-colophon.top {
    background-color: #fe0000 !important;
}
.x-colophon.bottom {
    background-color: #d79829 !important;
}

Perhaps you already fixed it? The navbar is in red background too instead of white.

Thanks!

#9

Hi Rad, yes fixed it thank you

#10

Glad to know!

Thanks

#11

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