Change amount to scroll before transparent menu transition

[arbolife]

Hi,

How or where (in which script) can I change the amount that needs to be scrolled to start the css menu transition from transparent to black. I need it shorter as some text in the header gets below the menu before it turns dark.

Thanks,

Marc

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Radu]

Hi,

The singles solution it’s to do this operation on parent theme file ( /wp-content/themes/kleo/assets/js/app.js ) see changes that you need to made below in screenshot

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

I made the changes you suggested, minified the file and uploaded it and the app.min.js to the server. It makes no difference whether the value in the parentheses is empty, 1, or 30. The dark background of the the menu only appears after more than 200 pixels of scrolling. I’d like it to appear 40 or 50px.

I noticed the settings you suggested altering are about the logo resize. I’m happy with how that works. I only want to bring in the dark background earlier in the scrolling.

Cheers,
Marc

[Radu]

I see, for the moment I don’t have any other quick solution regarding to this, we will get back to you these days with a solution.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

Thanks for getting back to me. No problem, there is no rush. I have another 10 days or so before going live with the area of the site where this is a problem.

Cheers,
Marc

[arbolife]

Hi Radu,

We’ll be going live this week, so now it’s starting to become a pressing issue. Can you please look into this?

Cheers,
Marc

[Radu]

Hi,

We are on that, but we still testing the behaviour later or tomorrow we will give you a solution for that

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

We’re live with the site, so it would be great if you could have a solution soon.

Here’s how it looks like, based on the browser height the text goes under the menu before it darkens: https://www.arbolife.com/directory/

Cheers,
Marc

[Radu]

Hi,

We should change the code login for make this accessible we are working on this, i think tomorrow we will be ready with this

Keep in touch

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

OK, thanks Radu. Keep me posted.

Best,
Marc

[Radu]

Today later we will release a new theme update where we have a new option in header option concerning that.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

Great, thank you. Can you please let me know where I can download the update ? All I can find is 4.1.7.

Cheers,
Marc

[Radu]

Please wait 1-2 days we are working on some stuff concerning this update.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

In installed 4.1.8 and played with the Resize Offset and I see no effect on the menu. I tried with 0, 1, 10, 100, 500 and I see no effect what so ever. What am I doing wrong ?

My current setting is 10. You can see that is has no effect on the resizing, nor on the darkening which is the behaviour I’m need to alter. Here is an example: https://www.arbolife.com/directory/

Cheers,
Marc

[Radu]

Hmm,

Can you confirm if in another page than geo directory it works ?

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

I tested again and there is an effect after all. (I updated a bunch of plugins in between).

The value affects the resizing of the menu, but the dark background still only appears after the transition is finished. It can’t be made short enough, because small or negative values reduce the initial size of the menu bar, or completely kill the transition with the menu already being small (which is not the intention).

I don’t want to change the timing or speed of the change in size of the menu, I like the default effect. The only setting I need is to have the dark background appear much earlier, even if the transition is not finished yet.

Cheers,
Marc

[Radu]

Hi,

For me it works, it’s a huge difference using those settings comparative with the default behaviour the header bg it’s applied after few pixels

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

My header is 110 and goes down to 55px. Even if I put 0 as the value, it still takes over 200px of scrolling before the dark background appears. Do you mind taking a look at my environment ? Hers’s a a link to my test site where you can take a look and mess around with settings if you want: ww1.arbolife.com

http://ww1.arbolife.com/wp-admin/
User: support-staff
Password: k*QIUuHsH(%9uNTSA(erGx*5

Best,
Marc

[Radu]

Hi,

Please replace this file content: /wp-content/themes/kleo/assets/js/app.min.js

with this one: http://pastebin.com/raw/nAdrMv2M

Also, replace this file content: /wp-content/themes/kleo/assets/js/app.min.js

with this one: http://pastebin.com/raw/a91e5n7R

It should work I’ve tested on multiple installs

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

I did copy the files over and I don’t see much of a difference.
Even when I set the value to 0 or 1 I have to scroll 200+ pixels before the background gets dark. I tried negative values, but they screw up the animation of the menu.

Can you please take a look at the test site I sent you a private link earlier? I made the change to the JS files and it still doesn’t have an impact (I disabled caching, so changes should work instantly).

Thanks,
Marc

[Radu]

I see your header becommes black after 1-2 pixels,

It’s ok now right ?

Cheers
R>

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

I see that on the ww1 test site the black background works, but the menu doesn’t resize from 110 to 55 like it should.

I have the exact same settings on the live site than on the ww1 test site and the result still doesn’t work.
My settings are on the image attached and this video shows the behaviour: https://www.dropbox.com/s/zcia3k1m05062fo/Screen%20Shot%202017-02-28%20at%2018.18.44%20.png?dl=0

Cheers,
Marc

[arbolife]

Sorry, got the wrong video link.
Here is the right one: https://www.dropbox.com/s/1alj8epprivyrht/scrolling.mp4?dl=0

[Radu]

Did you have replaced that file contents ? and you have activate development mode for the second site ?

Do that

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[arbolife]

Hi Radu,

Installing 4.2 fixed the problem. Thanks for keeping at it.

Cheers,
Marc

[Radu]

Great
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts