Problem with sticky bar scrolling

[juanjo6358]

Hello, my name is Juanjo Llopico. In my sticky navigation bar when I move the effect remains as it was at the beginning. For example, I have a navigation bar with blank text and a white image (with the logo). When I scroll I would like the background effect to change to white, the logo to black (I have the logo in black too) and the text to black so that when I scroll down to a new section with a white background the letters can be read.

Regarding this, is it possible to keep the initial effect until the photo of the image in the header is finished?

Another question I would like to ask. I have a section with a section of events (current events). When I pass over each event the letters turn red. Is it possible to change the color of the fonts?

Thanks!

[tristup]

Hi Juanjo,

Thanks for writing us.

Regretfully, the feature with header is not currently available with our theme and it is a part of customization.
You can avail our new service One for customization.

Although it is not possible in you can try if you are using Pro Header Builder.
Go To the Header and create a copy of the existing bar and set as the sticky bar -> on and hide initially,
set your preferred color and logo combination in the second bar and check once.

Remember that the above solution is only possible if you are using Pro Header Builder.

Regarding your Event Section color problem, please share the exact page URL to examine.

Thanks

[juanjo6358]

I’m using the localhost to build the page. How could I share the URL so you could see it properly?

Regarding to the possibility of second sticky bar its a good option. Thanks!

Btw, I have Pro builder.

Thanks
Juanjo

[christian]

Hey Juanjo,

Regretfully, we can’t check an offline site. Please move your development site online.

Regarding the sticky header, you need to set up 2 bars as suggested by @tristup. The specific setup of the bars is as follows:

1. Both Bars should be Positioned Absolute.
2. The 2nd bar should have either a Trigger Offset or Trigger Selector set up. See the sample effect in this video: https://youtu.be/lUU1FOo63qI. The 2nd bar is shown before the filter (.option-set) touches the bottom of the first bar.
   
3. The 2nd bar also needs the following Element CSS.

$el.x-bar {
  top: 0 !important;
}

Thanks.

[juanjo6358]

Thanks! It worked really well @christian and @tristup!!!

Regarding to the event section there is no way to change it without sending you the URL? for example, a CSS’s extension. Thanks for the great work you do!

[tristup]

Hi Juanjo,

Glad to help you.

Thanks