Header change image logo on scroll

Support
#1

Hi! i am trying to make that the logo change when I scroll down. I did try some snippets from other topics but they seem to be old and not working with pro on last version. I already have a css that change the color from transparency on top to solid color when you scroll down but I need also to change the logo because its not looking good with the transparency.

Here you can see how actually looks like

http://hustlerswatches.es

Thx in advance

#2

Hi There,

Please add the following code to Theme Options Javascript and update your LOGO Urls

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','http://placehold.it/120?text=Secondary+Logo!');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }
 });
});

Hope it helps

#3

Hi Joao

Its not working … I did try even with the original image sources and still not working… I have this css on the heather to make it solid when you scroll down, I don’t know if it could be a problem…

> .x-bar.x-bar-absolute{
>     background-color: hsla(276, 6%, 63%, 0.15) !important;
>     transition: background 0.5s ease;
> }

> .x-bar.x-bar-fixed{
>     background-color: #151e33 !important;
> }

> .x-bar [class^="x-bg"] {

>    background-color: rgba(21, 30, 51, 0.0) !important;
> }

> .x-bar.x-bar-absolute .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
>     color: #fff;
> }

> .x-bar.x-bar-fixed .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {
>     color: #fff;
> }

I give you here details to enter to the wp so you can check if I am doing something wrong.

#4

Hi There,

Sorry, I did not realize you were using the header builder the provided code would work just for X legacy header.

While this is certainly something that is not possible out of the box with the header and footer builders, it is intentional. In spending time with the new builders, you’ve undoubtedly seen first-hand the level of granularity given to users in choosing how to style elements at all levels. However, we have also taken time to not just throw a bunch of “low-level” options at people and call it a day. Everything is curated and designed in a way to give maximum customizability while also keeping the option set as manageable as possible.

To achieve the exact effect you’re speaking to, where a bar starts transparent, and then changes to a background color on scroll with a different logo, we would essentially have to offer two sets of base and interaction styles for every element you work with in a header.

All that being said, there are certainly some alternatives you can explore to achieve this effect. :slight_smile:

  1. When you have finished your bar, you can duplicate it, and set the second bar to be sticky and have a delayed reveal. This recreates the general effect minus the transition of the colors all happening inline. This was where we landed at for ourselves as a happy medium without bloating out the product for this one specialized effect.

  2. The effect you’re going for is also easily achievable with a little custom CSS if you’re feeling up to it. :slight_smile: When sticky bars become fixed, they have an “x-bar-fixed” class applied to them. You could use this class to style your own set of colors that should change on scroll very easily via your custom CSS inputs in the theme, or via a child theme.

Hopefully all of that helps to give a little more context on this. Thanks!

#5

Can you give me the CSS to do that? or even explain me how to make the delayed reveal… I have the two headers but I can’t make the first one to disappear…

Thx in advance

#6

Hello There,

Thanks for writing in!

1.) The background color delay is already in your css code:

.x-bar.x-bar-absolute{
     background-color: hsla(276, 6%, 63%, 0.15) !important;
     transition: background 0.5s ease;
}

It is found in the transition. The 0.5s indicates half of a second. You may increase it to 1 or 2 and see the difference in delay.

2.) The easiest way to change the logo upon scrolling is to upload two sets of logo image. You can add an ID for each of the logo image and let css hide/show the logo one at a time. For example, you already have uploaded the logos and have the IDs like logo-1 and logo-2. You can use a custom css something like this:

.x-bar.x-bar-absolute #logo-1{
  display: inline-block;
}

.x-bar.x-bar-absolute #logo-2{
  display: none;
}

.x-bar.x-bar-fixed #logo-1{
     display: none;
}

.x-bar.x-bar-fixed #logo-2{
     display: inline-block;
}

Hope this helps.

#7

@RueNel I was searching for this exact feature and was fortunate that this post was my first hit. Thank you for the useful info!!!

K

#8

Glad this helped you as well.

Cheers!

#9

Hi,

Using a scrolling topbar with custom class and used your script from “2)” above to try and change a logo, as I am trying to use a currently working topbar and add a new logo which swaps on scroll. I can’t seem to get the script to work - using relative topbar, and all works fine. Please help as I have a number of different topbars and sub-nav within the headers across the site. I have tried changing code but best I can achieve is that TWO logos appear then one disappears as it should but can’t get rid of two logos when page first displays. Secure note for URL

#10

Hello Stuart,

Thanks for writing in!

Please create a new ticket as posting on a ticket created by a different user causes lot of confusion which slows down the response time. More so, the details shared by you even in secure note is visible to the user that created the ticket. In that regards for a faster response time without creating confusion, please create a new ticket.

For security reasons I have removed the details shared in secure note. Please create a new ticket for us to take a closer look.

Thanks for understanding.