Docs

[Christopher]

Hi there,

Update your JS code to :

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
$('.x-navbar-fixed-top').css("background-color", "#fff");
} else {
$('.x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5");
}
});
});

Add this CSS :

@media (min-width: 979px){
.x-main div#rev_slider_8_1 {
  margin-top: -76px;
}
}

Hope it helps.

[sendpire]

works perfect, thanks again!

[Thai]

You’re most welcome 🙂

[sendpire]

Sry that I have to post in here again but I just recognized that now the header turns white when scrolling down on mobile devices and it stays white, can I make something to dissble that the header turns white at all on mobile?

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (min-width: 979px){
    .x-navbar {
        background-color: rgba(255,255,255,0.5)!important;
    }
    .x-nav-wrap.mobile.collapse.in {
    background-color: rgba(255,255,255,0);
    }
    .x-navbar .mobile .x-nav li > a {
        padding-left:10px;
    }
    .x-navbar .mobile .x-nav li:nth-child(5) > a,
    .x-navbar .mobile .x-nav li:nth-child(6) > a {
        padding-left:0px;
    }
}

Hope this helps – thanks!

[sendpire]

unfortunately this didnt solve the problem.

I want to keep the settings for the desktop version of my site as they are.

I dont want the header to turn white on mobile, but stay transparent all the time, that worked fine before I added the javascript code you gave me.

If I remove the javascript everything works fine for the mobile view, but the header on desktop view stays transparent.

Is there a way to seperate those 2?

header on desktop: transparent while on top, turns into white while scrolling, and back into transparent when the site is scrolled to the top again.

header on mobile: always transparent.

thanks!

[Zeshan]

Hi there,

In that case, simply using following CSS code as well under Custom > CSS in the Customizer:

@media (max-width: 979px) {
    .x-navbar {
        background-color: rgba(255, 255, 255, 0.4) !important;
    }
}

Thanks!

[Author]

Posts