Header builder: adjusting position of primary particle interaction

Hi there, I’m building a simple header for specific pages, and using the primary particle to create a thin line that appears over the hovered menu item. At the moment, that line is set to appear in the centre of the menu item, effectively giving a strike through effect on the text.

What I’d like to do is have it appear beneath the text, underlining the menu item text as opposed to looking like a strike through. Been fiddling with settings and CSS for ages, no luck! Any way to do this?

Many thanks,
Shaun

Hi There,

Please provide your URL

Thank you

Hi there,

What page you’re currently referring? They have different headers and there is no strike through effect. But I created a sample that you could use at reference.

Thanks!

Hi there,

This is the header I’m referring to, Centre 1: http://ascendfilm.co.uk/x/#/headers/66/layout

The underline effect you’ve created as an example places the underline at the bottom of the header: what I’m looking for is to have the underline immediately beneath the text in the menu, so it looks like a normal text underline effect.

Thanks,
Shaun

Hello,

I’ve tried to access the above link but is necessary the WordPress credentials. If you could provide to us in a secure note.

I don’t use support for anything very often, I prefer to figure it out myself. If I do use it, it’s generally because I need to do something quickly, as was the case here. I don’t think 3/4 days on a simple request, dealing with 3 different support staff, is particularly impressive. I provided login credentials and specified the header. I appreciate that Apex is just getting started and I don’t want to appear unduly critical, but the support experience here wasn’t great. Hopefully you guys can iron things out or this was just a one off, because everything else about Pro is awesome.

Anyway, if anyone else happens across this thread, I figured it out. As is usually the case, it was a really simple piece of CSS that did the trick. I added it to the main Custom CSS menu option for the header, not in the Primary Particle CSS box. To be clear, what I was trying to achieve was an animated underline effect on the text in my header, as opposed to having the line appear as a strike through or right at the bottom of the header. Here’s the CSS:

[data-x-particle*=“inside”][data-x-particle*=“c_c”] {
top: 64%;
left: 50%;
}

The 64% value works for me, you may need to tweak depending on font size etc. The ‘left’ value is still at the default 50%. You can control all the animation/interaction values within the header builder as normal, this just move the Primary Particle down a bit.

Shaun

1 Like

Hi Shaun,

Sorry about that, the post that has you credentials was withdrawn/hidden and we missed that.

Anyway, glad you were able to figure it out and thanks for sharing the code.

Have a great day!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.