New Active Link Options

[adsmedia]

Hi,

First off thanks for continuing to update and support this theme. I’m trying to figure out something about the new “Active Links” in the headers.

If I understand correctly, this colour is determined from the “Interaction” background colour. However this causes issues when using the Primary or Secondary Particles to give nice animations when you over the menu items. If I choose an Interaction colour it pops in before the Particle animation completes.

Can we please get this “Active Link” colour to be it’s own selector so we’re not forced to use “Interaction” and break the nice particle animations?

[friech]

Hi There,

Thank you for writing in and for continued support of our Themes, but I’m not entirely certain of the issue. Would you mind providing us a sample site so we can have a better idea of the issue?

Cheers!

[adsmedia]

I can highlight the issue with gifs.

Here’s how it looks when using just the particle effect:

Here’s how it looks with particle effect + interaction colour needed for Active Links:

If you notice in the second gif the background starts fading in before the animation can finish and looks janky. The issue stems from REQUIRING an interaction colour for the Active Link feature. If this were it’s own colour selector/option there would be no conflict like this.

[rad]

Hi @adsmedia,

I did notice that the second one is bit slower (no easing). May I know the URL of this site?

I tried on my installation and I can’t seem to see the difference for active and hover particle/background? Maybe we could just adjust the CSS.

Thanks!

[adsmedia]

It’s not that it’s slower, It’s that 2 things are happening at once. The particle animation is playing and the hover Interaction required for the new Active Link colour is also fading in at the same time on top of each other.

The problem comes from where the new Active Link grabs it’s colour from. Right now I want no background colour interaction on hover as that’s being handled by the particle effect.

I want this to be transparent like this for the hover, but since the Active Link colour is determined by this setting if I want to use the active link feature I HAVE to set a colour here.

What I’m trying to get at is that you’ve tied two systems that do two different things to a single variable. As such I cannot have one or the other I’m forced to have both regardless of if I want that to handle my background colour on hover.

The site is WIP and behind a maintenance wall, let me get you a login.

[ruenel]

Hello There,

Thank you for the clarifications. Please be advised that we have designed the active color, interaction and the particles differently in mind. The Interaction controls the background color of the menu link and the particles was designed to add some flare to the menu hover. The most basic function of the particles is to display a bar, border, square or a triangle. It can be use to display a background color like what you are doing. It would contradict with the interaction background colors though if you do that. If you use both (not recommended), you may add a delay in your particles set up to wait for the interaction to finish before the particle would start to display.

Hope this helps.

[adsmedia]

Thanks for the reply, but it doesn’t really address the issue here and the above method doesn’t help at all because the delay is on the particle and not the background. I don’t want to use both as outlined above, but since the Active Link feature in the new version requires that I have to choose between the nice looking particle effect and the new feature.

This makes me makes me concerned for future updates to the themes and how many things that we once had working will get broken by things like this. There was a method of doing something like above, that worked well and produced very nice looking results. Then an update came in and automatically applied the “Active Link” be default to existing menus. This would be fine, but the colour attribute is chosen from a different feature but since it’s not I have no control over it. Now I have to go through all my sites and check each menu to see if it will work or not with the new feature turned on be default.

That’s how I noticed this change in the first place. I went on to the mentioned site and visited a page and it looked like that page in the menu was missing. This was because it started applying the “Interaction” colour for the background and text (in this case Transparent and White) on top of my white header. I thought something was broken at first until I read around in the changelog.

I just want to point this out so that hopefully in the future when you are working on new updates that you take that in to account when designing new systems. The new feature should stand on it’s own so that it doesn’t cause conflicts like this, not be tied to something else.

[adsmedia]

For anyone else who might have this issue, here’s my current workaround via CSS:

Simple fix:

/* This colour will be displayed for your active links regardless of interaction color*/
.x-menu > li > .x-always-active {
  background-color: rgb(113, 199, 206) !important;
}

[paul.r]

Hi,

I totally understand and appreciate your concerns. This has been noted and forwarded to our leadership team.

Thanks for sharing your workaround code.

Have a nice day!