Docs

[sebagc]

Hi Team!
Ive found plenty of forum posts related, but i think there is none perfect for my needs.
I would love to have a transparent Header(logo and nav bar) for the home page(or a certain page) and a simple white header(logo an nav bar) for the rest.
Also, for the transparent header pages, i would like to have a white(maybe with some % of opacity) menu background when scrolling down.
Is it possible?
The website is http://www.Sudgower.com

Thank you very much in advance!
Best regards!
Sebastian

[Paul R]

Hi Sebastian,

Thanks for writing in!

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

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

.home .masthead {
    position:absolute;
    width:100%;
}

.home .x-navbar.x-navbar-fixed-top {
    background-color:rgba(255,255,255,0.5);
}

Hope that helps

[sebagc]

Hi! thank you very much!
It worked partially. The menu background is transparent but when scrolling down it still is transparent.
Also, Is there a way to make this exclusive for the home page? (or a specific page, to apply it also to one more page)

Thank you!!
Best regards!

[Joao]

Hi There,

Please use the following code instead

On Appereance Customizer Custom > CSS

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

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color: rgba(255,255,255,0.7);
}

On Appereance Customizer Custom JavaScript

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.home .x-navbar').addClass("x-navbar-solid");
        }else {
              $('.home .x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Hope that helps,

Joao

[sebagc]

Hi Joao!
Im sorry for the delay in the follow up.
This didn’t work either.

Please let me know what else can we do!
Thank you very much!

Best Regards!!
Sebastian

PS: Is it possible to also show a different logo image when scrolling down?
Thanks!!!!

[Rupok]

Hi there,

The code seems fine and should work. It’s not working because you have another code that’s interfering. Kindly update this code :

.x-navbar-solid {
     background-color: rgba(255,255,255,0.7);
}

to

.x-navbar-solid {
     background-color: rgba(255,255,255,0.7)!important;
}

Hope this helps.

[sebagc]

Thank you very much!!! It worked!!! you’re awesome!!

[Paul R]

You’re welcome! 🙂

[Author]

Posts