Docs

[ianlamze]

Hello, I am trying to recreate a header and slider that is similar to this website https://thecuratedtravel.com/

Currently I’m having trouble trying to find a menu header that is simply just words as well as adjusting the words to be smaller like the example I posted.

How can I also overlay the header onto revolution slider and have the header be transparent upon entering the site but becomes translucent upon scrolling?

Cheers,
Ian

[Christian]

Hey Ian,

Please setup a Fullscreen slider below the masthead and we’ll help you next with the transparent navbar transitioning to solid background upon scrolling. See https://community.theme.co/kb/sliders/ to set a slider below the masthead.

Thanks.

[ianlamze]

This reply has been marked as private.

[Paul R]

Hi,

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

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

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

.home .x-navbar.x-navbar-fixed-top {
    background-color: #fff !important;
}

Then add this in Custom Javascript.

jQuery(document).ready(function($){
    $(window).scroll(function(){
                if ( $(this).scrollTop() ==0) {
                      $('.x-navbar').removeClass('x-navbar-fixed-top');
                }

});

});

Hope that helps.

[ianlamze]

This reply has been marked as private.

[Christopher]

Hi there,

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

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none;
}

Hope that helps.

[Author]

Posts