[thisisbbcParticipant]

Hi,

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

[ChristianModerator]

Hey there,

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. 🙂

[thisisbbcParticipant]

Hi,

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

[thisisbbcParticipant]

Edit : I’ve noticed the first time the page is displayed and we have not yet scrolled, the class .x-navbar-fixed-top doesn’t exist.

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?!

[RadModerator]

Hi there,

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!

[derrickParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

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!

[srpickertParticipant]

Is this valid for the Integrity stack as well?

[RadModerator]

Yes, it should be.

[CaptrawrsParticipant]

How do I get to the CSS to take out the old? or do I just place it in the Custom CSS field and it just replaces it?

[ZeshanMember]

Hi Captrawrs,

Thanks for writing in!

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[CaptrawrsParticipant]

I basically want to accomplish what is done on this (http://themenectar.com/demo/salient-frostwave/) website with the header Transparent at the top and then pops into focus. It was my understanding after reading this post that I had to replace background color background image and use the code that is mentioned above. Any help you can give me greatly appreciated.

[Nabeel AModerator]

Hi again,

Thank you for the explanation, To achieve the similar effect you can refer to this thread https://community.theme.co/forums/topic/transparent-nav-transition-one-page-nav/#post-558918

Hope this helps!

[CaptrawrsParticipant]

Worked great but is there anyway to remove the line well its transparent? http://forthepeopleusa.org/ and have it do the logo/header re-size like http://themenectar.com/demo/salient-frostwave/.

[FriechModerator]

Hi There,

I’m not sure which line you’re referring to, but if it is the red line above the menu item you can add this under Custom > CSS.

.x-navbar .desktop .x-nav > li > a {
    box-shadow: none !important;
}

The transition effect of the header on this page: http://themenectar.com/demo/salient-frostwave/ requires an custom development and I’m afraid that would be outside the scope of support we can offer.

Thanks for understanding, Cheers!

[Author]

Posts