Customize Menu header animation

Support
#1

Hi there,

I’m staging a site here:

http://www.padthai.decorolux.com/ and I need to tweak the navbar hover animation to something like this:

How would this be achievable?

Thanks!

#2

Hi there,

Thanks for posting in.

You can do that by enabling the PRIMARY PARTICLE SETUP and configure it accordingly. But add this to your header custom CSS to make it dotted and position just below the text.

.e30-7.x-menu > li > .x-anchor .x-anchor-particle-primary {
    width: 100%;
    height: 0px;
    color: hsla(0,100%,21%,0.75);
    transform-origin: bottom;
    transform: translate3d(-50%, -1600%, 0) scale3d(1, 1, 1);
    border-bottom: 2px dashed;
}

Thanks!

#3

Hi there,

I tried adding the code, but it unfortunately did not do the trick.
I tried to see what css takes place on hover, but I cannot find the trigger:

I added, hover, active and basically everything but the animation will not come up :smiley:

I added the code to the header as well: https://www.dropbox.com/s/tbaqgyfqeqtyj2d/Screenshot%202018-04-16%2016.27.52.png?dl=0

Any idea what I’m doing wrong?

Thanks!

#4

Hi Pbalazs89,

I’ve checked your website and I think the problem is that you moved the navigation menu from its container in the header builder, that’s why the CSS code isn’t working. To avoid that please add custom CSS class to the Navigation Menu in the Header Builder as following: custom_menu for example:

After that, replace the previous CSS code with this one:

.custom_menu.x-menu > li > .x-anchor .x-anchor-particle-primary {
    width: 100%;
    height: 0;
    color: hsla(0,100%,21%,0.75);
    border-top: 2px dashed;
    top: 20px;
}

Thanks.

#5

Hi there,

The code works great, but I have not been able to make the dashed lines appear as circles. Is there a css trick to achieve this?

Thanks!

#6

Hi there,

What you can do is to use an image as a border. You can do this by using border-image in the CSS attributes.

So first. you will need to have an image that will be the border then use:

border-width: 2px 0 0 0;
border-image: url('path-to-your-png') 33% round;

instead of

border-top: 2px dashed;

You can find some more information here:

Hope this helps.

#7

Hi there,

You guys are awesome, that was exactly what I needed.
Quick question though, when I hover on my li items right now, the animation under it goes through the whole container… is there an easy way to adjust it so that it only goes until the end of the text?

#8

Hi there,

Instead of adding the left and right padding to the top links of the menu to add a space between each menu item, try adding a left and right margin instead.

Hope ths helps.

#9

Thanks, that worked great! Couldn’t have done it without you! :slight_smile:

1 Like
#10