Docs

[stuartrowens]

I’m sure this is a simple CSS fix, but I’ve been unable to find a solution thus far in the forums.

Site is gofaministries.org

We would like the transparent menu to turn to a solid color one a user scrolls past the opening video slider. Right now, it turns white about halfway through the scroll, which is fine, but it would look better if it didn’t change until the menu was past the slider.

Additionally, we would like the menu to be a solid color on all other pages and on all pages (including the main page over the slider) on mobile.

I hope that question makes sense! In summary:
1. Menu is transparent (as it appears now) when over slider and then becomes solid color after.
2. Menu is solid color on every other page.
3. Menu is solid color on every page on mobile.

Thank you!

[Rue Nel]

Hello There,

Thank for writing in! To resolve this issue, please have your css code updated:

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

.home .x-navbar {
    background-color: transparent;
}

And then you also need to update your custom JS

jQuery(document).ready(function($){
  var sliderH = $('.home .x-slider-container.below').height();
  $('.home.x-navbar-fixed-top-active .x-navbar-wrap').css('height', 0);
  $('.home .x-navbar').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
  
  $(window).scroll(function(){
    if ($(this).scrollTop() > sliderH) {
      $('.home .x-navbar-fixed-top').css({'background-color': '#fff', 'box-shadow': '0 0.15em 0.35em 0 rgba(0,0,0,0.135);', 'border-width' : '1px'});
    } else {
      $('.home .x-navbar-fixed-top').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
    }
  });
});

We would loved to know if this has work for you. Thank you.

[stuartrowens]

This worked great for my issues on desktop! Thank you! The only thing that remains is to make the dropdown menu on mobile have a solid background. I’ve included a screenshot. As you can see, with the transparent menu the text is tough to see. I’d love for that to be solid white as well. Thanks for much for the great support!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:979px){
.x-nav-wrap.mobile {
    background-color: #000;
    padding: 10px;
}
}

Hope that helps.

[Author]

Posts