Docs

[TheLunchBawx]

Hello!
I just got X and I love it so far but I was wondering if someone could tell me how to customize the animation when hovering over the menu buttons (Home,contact etc), what I have so far is when you hover over it a bar pops up above the name of the button, what I want it to do is the bar from the already selected page to move to whatever button your hovering over. (Here’s my website http://thelunchbawx.com/ Just realized that my website is in construction, tell me if you would like me to remove that.). Hopefully I made sense there :).

I can also give an example if needed.
Thanks!
– TheLunchBawx

[Christopher]

Hi there,

I would like to check your site but it’e under construction mode, please provide us with login credentials.
Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[TheLunchBawx]

Hello.
Alright, so here’s a example site for what I would like to do. ( http://www.templatemonster.com/demo/55555.html ) but instead of the bar being transparent and being at the bottom, I want it at the top like what the integrity stack already does.

Where would you like me to give you the login credentials or would you like me to remove the construction?

[Nico]

Hi There,

Please share us your admin credentials in private reply so you will not remove the underconstruction mode and to check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[TheLunchBawx]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for providing the login credentials. Regretfully the menu in your site and in the example url doesn’t have the same structure. We could only mimic the background effect of the menu item but not the line the goes underneath it. To do that, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #f2f2f2;
    z-index: -1;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    transition: all 0.3s ease-in-out;
}

.x-navbar .desktop .x-nav > li > a:hover:before,
.x-navbar .desktop .x-nav > li.current-menu-item > a:before{
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

If you want to remove the green line above the menu items, you can use this code in your customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank your for your understanding.

[TheLunchBawx]

Hello,
Thanks so much! Could you put me in the right direction to customize the animation of the dropdownmenu as well? Is the CSS something like .x-dropdownmenu?

[Rupok]

Hi there,

Thanks for writing back. It seems you are using a third party plugin for this (Cherry mega menu) that we can’t control. You can try something like this to control the transition duration :

.item-type-standard .cherry-mega-menu-sub {
  transition-duration: 500ms!important;
}

I can’t guarantee about this but you can try.

Cheers!

[TheLunchBawx]

Hi, I actually used this code to make my dropdown menus a bit smoother,
jQuery(document).ready(function($){
$(“.menu-item-has-children”).hover(function(){
$(this).children( “ul.sub-menu” ).show(800);
}, function(){
$(this).children( “ul.sub-menu” ).hide(“slow”);
});
});

Would you be able to point me in the right direction to make it so my green bar above home, moves to the button your hovering over on the menu?

[Rupok]

Hi there,

Thanks for writing back. I am not sure what you are referring by “green bar above home”. Would you clarify with a screenshot that what you are trying to achieve? I can’t guarantee but if that’s possible, we’ll surely try to assist you.

Cheers!

[TheLunchBawx]

Here’s a screenshot for the green bar above home on my website.
Also what I want it to do is slide whenever you hover over another menu button. You can see in this theme demo there’s a transparent bar below the menu buttons and what I want is that slide animation. (http://www.templatemonster.com/demo/55555.html)
I was wondering if that’s possible?

[Jade]

Hi there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer since the structure of the menu you have link is different from X. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[TheLunchBawx]

Alright, would you be able to show me how this guy did his menu animation? http://oasiscentre.com/ That website was made with X.

[Christopher]

Hi there,

Please add this :

.x-navbar .desktop .x-nav > li > a {
    webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

Hope it helps.

[TheLunchBawx]

Alright, thanks so much!

[Author]

Posts