[Jocke dParticipant]

Hi support center. Once again, great theme!

First of.
I’m currently building a website for a client. http://www.gaddtandlakare.se/wordpress
I wonder if it’s possible to have a decided background color in the .x-navbar style tag, and after scrolling a certain amount of pixels or any other possible value, another background appears.

just like they’ve done on http://www.fb.se with the dotted background when scrolling down 176px which displays in the style tag

element.style {
top: -176px;
}

Second.
As you can see on once you enter the http://www.fb.se site you see a image of their logo, transition and then you can see their content, is that kind of effect possible to accomplish with X?

Thanks in advance, greatly appreciated.

Jocke

[Kosher KMember]

Hi Jocke,

Thanks for writing in.

You may want to refer to this topic

http://theme.co/x/member/forums/topic/remove-logo-when-scrolling/

Hope that helps

Cheers

[Jocke dParticipant]

Hi again,

Yeah, found that topic after posting this to you today, i’ve added and tried it on my website.
But can you please tell me how to add a background that shows after a value of pixles, if it’s with css or javaScript. This is the first time I’m in contact with java and would really appreciate if you guys could help me out.

Thanks.

[Jocke dParticipant]

Hi again,

Or, is the solution to create another menu class that displays at a value? Can you help me out?

Thanks.

[ZeshanMember]

Hi Jocke,

Thank you for writing in!

This is possible by modifying the JS code a bit. To do that, please replace the following with the older JS code you added to Customizer > Custom > JavaScript:

(function($){
   $(window).scroll(function(){
      if ($(this).scrollTop() > 0) {	
         $('.x-navbar').css('background-color','#ff0000');
      } else {	
         $('.x-navbar').removeAttr( 'style' );
      }
   });
})(jQuery);

Replace #ff0000 with your desired color hex value. From here you can generate Hex color value: http://www.color-hex.com/color-wheel/

Hope this helps. If you still face any issue, please let us know. We’ll be happy to assist.

Thank you.

[Jocke dParticipant]

Hi again,

this works great and i’ve managed to modify it at bit.

My navbar background color at top is white, and x-brand img color is black, but then i tried to ad this code:

$(‘.x-brand img’).attr(“src”, “/xxl/wp-content/uploads/2014/07/xxl-logo.png”);

because when i scroll the navbar background turns black and I want a white logotype.

Everything works fine, but when i’ve scrolled the page and return to the top and the navbar background color is white, the black logo doesn’t appear.

here’s my code:

(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
$(‘.x-navbar’).css(‘background-image’,’url(/xxl/wp-content/uploads/2014/07/dot.png)’);

$(‘.x-navbar’).css(‘background-color’,’#333′);

$(‘.x-brand img’).attr(“src”, “/xxl/wp-content/uploads/2014/07/xxl-logo.png”);

} else {
$(‘.x-navbar’).removeAttr( ‘style’ );
}
});
})(jQuery);

Thanks again,

[ZeshanMember]

Hi Joche,

Thank you for writing in!

Great to hear that we could help you solve the previous issue 🙂

Regarding the following issue, would you mind sharing your website’s URL so that we can take a more closer look to the issue and provide you with a tailored answer?

Thank you.

[Author]

Posts