[p6sitesParticipant]

Hello X team,

I am working on a website where I am using a video or image under the header in most pages and I am wondering if it is possible to have the header on top of the image (or video) transparent, so the header has no background color and the navigation is on top of the image (or video). I want it to work in way that once the user scrolls and passes the image (or video) section, the header becomes fixed, and it will have a background color. Can I do this with X theme and if yes, how would you recommend I accomplish it?

Thanks!

[JadeModerator]

Hi there,

Yes, this is possible by setting the header to be Fixed Top in the customizer and adding some CSS.

Kindly provide us with your site URL so that we could help you with the CSS code. Thank you.

[p6sitesParticipant]

This reply has been marked as private.

[John EzraMember]

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.

.x-main.full {
    top: -72px;
}

You can add this under Custom > Javascript in the Customizer.

jQuery(document).ready(function($){
 $('.home .x-navbar-fixed-top, .home .x-navbar').css("background-color", "transparent");
var image_height = $(".home #x-section-1").outerHeight();
 $(window).scroll(function(){
   if ($(this).scrollTop() > image_height) {
     $('.home .x-navbar-fixed-top').css("background-color", "#00ACF0 ");
   } else {
     $('.home .x-navbar-fixed-top').css("background-color", "transparent");
   }
 });
});

Hope this helps – thanks!

[p6sitesParticipant]

Hi there,

Thanks for the help. This definitely helped. I do have additional question though. Is there any way to have the transparent header static, so that it moves with the image until it changes to a colored header and becomes fixed?

Thanks?

[RadModerator]

Hi there,

What image? Is it the logo? It’s already moving along with the header.

Thanks!

[p6sitesParticipant]

Hi,

I am sorry for the confusion, I meant video, not image. Right now on the home page when the user starts scrolling, the video scrolls under the header because the header is fixed. I am wondering if it is possible to have the transparent header static at first, so that when the user starts scrolling, the video will NOT scroll under the header but it will scroll with it until the header becomes colored, and then the header will become fixed, and the site content will scroll under the header. To do that, do I need to have two different headers with different position values?

Thanks!

[JadeModerator]

Hi there,

Please update the previous JS code to:

jQuery(document).ready(function($){
 $('.home .x-navbar-fixed-top, .home .x-navbar').css("background-color", "transparent");
var image_height = $(".home #x-section-1").outerHeight();
 $(window).scroll(function(){
   if ($(this).scrollTop() > image_height + 72) {
     $('.home .x-navbar-fixed-top').css("background-color", "#00ACF0 ");
   } else {
     $('.home .x-navbar-fixed-top').css("background-color", "transparent");
   }
 });
});

Hope this helps.

[p6sitesParticipant]

Hi there,

Updating the code didn’t change anything ( the video is still scrolling under the transparent header), but thank you for the help anyway.

[Rue NelModerator]

Hello There,

I am another staff checking on this topic. Please update the JS code. You can make use of this instead:

jQuery(document).ready(function($){
 $('.home .x-navbar-fixed-top, .home .x-navbar').css("background-color", "transparent");
var image_height = $(".home #x-section-1").outerHeight();
 $(window).scroll(function(){
   if ($(this).scrollTop() > image_height) {
     $('.home .x-navbar-fixed-top').css({"background-color": "#00ACF0 ", "position": "fixed"});
   } else {
     $('.home .x-navbar-fixed-top').css({"background-color": "transparent", "position": "absolute"});
   }
 });
});

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

[Author]

Posts