[TimmidParticipant]

Hello X theme,

I like to have the header effect as discussed in this forum topic:
https://community.theme.co//forums/topic/transparent-headernavbar-only-when-on-top-of-page/

A transparent header 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.

I added the CSS and Script on my website but it doesn’t work for me. The header stays on the bottom of the page.

you can find my website here:
http://paradigmum.nl/projecten/ktb/

Thx in advance.

[ZeshanMember]

Hi Timmid,

Thanks for writing in! If you want to keep your navbar transparent like this: http://prntscr.com/812ghr and fixed to top with a solid background color on scrolling, you can use following CSS code under Custom > CSS in the Customizer:

@media (min-width: 768px) {
    .x-navbar:not(.x-navbar-fixed-top) {
        background-color: transparent;
        margin-top: -110px;
        box-shadow: none;
    }
}

Thanks!

[TimmidParticipant]

Thx for the help.

The transparent part is working. But the menu isn’t at the top of the page. Can you help me with that?

And because the nabber is transparent now I see a problem with the logo and menu link colors. Is it possible to have a different logo image when the menu is transparent? and a different menu link color?

[ZeshanMember]

Hi Timmid,

To move your logo to the top, use following CSS code instead of the provided one:

@media (min-width: 768px) {
    .x-navbar:not(.x-navbar-fixed-top) {
        background-color: transparent;
        box-shadow: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: none;
    }
}

As for the different logo and colors, this could technically be possible to achieve with more in depth CSS and JS customizations but would fall beyond the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[TimmidParticipant]

Thank you, this works great!

Can i change when the header with background comes in? I would like to have it directly after the slider. Now it takes a bit more time when the menu shows.

[TimmidParticipant]

Already found a solution to change the logo when scrolling. So if i can change it when the menu with background comes in i’m a happy man 🙂

Thank you!

[ChristopherModerator]

Hi there,

Please provide us with the code you have already added to your site to achieve this.

Thanks.

[TimmidParticipant]

these are the codes that i have added

CSS

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

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

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

.x-navbar.x-navbar-fixed-top .x-brand {
width: 300px;
margin-top: 15px !important;
}

@media (min-width: 768px) {
    .x-navbar:not(.x-navbar-fixed-top) {
        background-color: transparent;
        box-shadow: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: none;
    }
}

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

/*  Remove shadow recent posts */

.x-recent-posts a {
border: none !important;
box-shadow: none !important;
}

Javascript

jQuery(function($){

$(window).scroll(function(){

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

})

});

(function($){
 $(window).bind('scroll', function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar .x-brand img').attr('src','http://paradigmum.nl/projecten/ktb/wp-content/uploads/2015/08/KTB-Koning-Logo.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://paradigmum.nl/projecten/ktb/wp-content/uploads/2015/08/KTB-Koning-Logo-Witte-tekst.png');
   }
 });
})(jQuery);

Is it possible to apply the changes to the menubar and the scrolling only on the home page?

[ZeshanMember]

Hi Timmid,

This could technically be possible to change the offset value for the header to fix on the top with custom JS customization, but that would fall beyond the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[TimmidParticipant]

Thx for the answer.

After some trial and error I’m almost there with what i want to achieve but with the provided code from above to have the menu transparent on top of the .masthead there is some space under the slider.

I think it is the menu background because if i set the height of the menu to 0 it disappears. But if i do that on other pages the website moves up behind the menu.

Can you help me remove that space?

Thx!

[RupokMember]

Hi There,

You can add the code ( that will only work on homepage) –

.home body.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: -100px;
}

Hope this helps.

Cheers!

[Author]

Posts