I know there’s quite a few topic on the subject and we’ve read them but there wasn’t an answer covering this specific scenario.

We’re looking to achieve a header style similar to the Salient theme (http://themenectar.com/demo/salient-frostwave/)

That is, the header should be transparent when on top-of-page, with a slightly higher height and logo size. As soon as we start to scroll, the header goes back to a smaller size with a plain background.

Is this possible with Ethos stack?

Also, would that scenario still work if we use a slider above masthead?

Thanks!

Best regards,
BBC

That is possible and also with Ethos. It will work also with the slider above masthead. Please try adding the code below in your Appearance > Customize > Custom > CSS.

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

.x-navbar.x-navbar-fixed-top {
    background-color: white;
    height: 80px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
font-size: 30px;
}

.x-navbar.x-navbar-fixed-top  .x-nav > li > a {
    padding-top: 30px !important;
}

If you’re using image logo, please try using width: 200px instead of font-size: 30px; for

.x-navbar.x-navbar-fixed-top .x-brand {
font-size: 30px;
}

Change the values as for your needs.

Hope that helps. 🙂

Thank you for your help, however the provided code doesn’t seems to work as expected. The first parent container, .x-navbar, is set to a transparent background, but the child container .x-navbar.x-navbar-fixed-top has a white background, even when on top of the page.

It doesn’t seem that there is a specific class for when the user is on top of the page, or when the user viewport is lower than the top of the navigation menu (if a slider above masthead is used).

I can manage to make the navigation menu transparent, or with a plain background, but so far I’ve been unable to have a transparent background on top of page and make it transition to a plain background when scrolling down…

Maybe we need to add some kind of script?

Looking forward to your reply.

All best,
Bastien

However, as soon as we scroll, it is added and then it is never removed, even if you scroll back to the top of the page.

Maybe that’s the issue?!

Please add this code at your customizer’s custom javascript.

jQuery(function($){

$(window).scroll(function(){

if( $(this).scrollTop() == 0 ) {
$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
}

})

});

Cheers!

This is possible if you are using background-color instead of background-image. Replace following from your custom CSS:

.x-navbar.x-navbar-fixed-top {
background-color: none!important;
   /*background-color: #013a5f;*/
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 58, 95, 0.90)), to(rgba(0, 59, 98, 1.00)));
background-image: -webkit-linear-gradient(top, rgba(1, 58, 95, 0.90), rgba(0, 59, 98, 1.00));
background-image: -moz-linear-gradient(top, rgba(1, 58, 95, 0.90), rgba(0, 59, 98, 1.00));
background-image: -o-linear-gradient(top, rgba(1, 58, 95, 0.90), rgba(0, 59, 98, 1.00));
background-image: -ms-linear-gradient(top, rgba(1, 58, 95, 0.90), rgba(0, 59, 98, 1.00));
background-image: linear-gradient(top, rgba(1, 58, 95, 0.90), rgba(0, 59, 98, 1.00));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#013a5f', EndColorStr='#003b62');
 height: 80px;
}

With following:

.x-navbar.x-navbar-fixed-top {
   background-color: #193965;
   height: 80px;
}

Thanks!