Docs

[Eidderf]

Greetings master jedi,

Your padawan needs your help again.

I’m having an issue with my main navigation.

ISSUE # 1
Whenever I hover into the main nav of my site, I’m noticing a sluggish reaction of the submenu. There are two distinct reactions:
1. submenu shows super slow when hovered
2. if it shows, it will stick to what it is showing even if you are hovering on another menu item.

This issue is present in English and RTL views.

ISSUE # 2
There is a significant misalignment of the submenus in both English and RTL views. You’ll fully understand what I meant by this when you see my detailed screenshots in the following thread.

IMPORTANT! I was advised by my company to keep this issues discreet. So kindly refrain from mentioning our company name, URL or sharing a screenshot to the public. Please make them private. However, we do understand that code solutions should be shared to the community, so you may share it as long as you don’t mention our identity. Sorry for the trouble master jedi. Our order is really that austere 🙂

I’ll share the details in the next thread.

Thank you

[Eidderf]

This reply has been marked as private.

[Thai]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Thai]

Hi There,

To fix this issue, please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar .desktop .x-nav>li>.sub-menu {
    display: none;
    left: 50%;
    margin-left: -100px;
}
.x-navbar .desktop .x-nav>li:hover>.sub-menu {
    display: block;
}

Hope it helps 🙂

[Eidderf]

This reply has been marked as private.

[Christopher]

Hi there,

Please update previous code to :

.rtl.x-navbar-static-active .masthead-inline .desktop .x-nav>li:not(.x-megamenu) .sub-menu, .rtl.x-navbar-fixed-top-active .masthead-inline .desktop .x-nav>li:not(.x-megamenu) .sub-menu {
    left: auto;
    right: 0;
    top: 132px !important;
}
.x-navbar .desktop .x-nav>li>.sub-menu {
    left: 15%;
    top: 130px !important;
    width: 350px;
}

Hope it helps.

[Eidderf]

Hi,

I modified your code and it is now displaying correctly in both English and RTL views. However, the HOVER effect is again not responding 🙁

Here is my modified code:

.rtl.x-navbar-static-active .masthead-inline .desktop .x-nav>li:not(.x-megamenu) .sub-menu, 
.rtl.x-navbar-fixed-top-active .masthead-inline .desktop .x-nav>li:not(.x-megamenu) .sub-menu {
    left: auto !important;
    right: 0 !important;
    top: 85px !important;
}
.x-navbar .desktop .x-nav>li>.sub-menu {
    left: 15%;
    top: 85px !important;
    width: 350px;
}

[Rad]

Hi there,

Please change it into this,

  .rtl.x-navbar-static-active .masthead-inline .desktop .x-nav>li:not(.x-megamenu) .sub-menu, 
.rtl.x-navbar-fixed-top-active .masthead-inline .desktop .x-nav>li:not(.x-megamenu) .sub-menu {
    left: auto !important;
    right: 0 !important;
    top: 85px !important;
}
.x-navbar .desktop .x-nav>li>.sub-menu {
    left: 15%;
    top: 85px !important;
    width: 350px;
    display: none !important;
}
  .x-navbar .desktop .x-nav>li:hover>.sub-menu {
  display: block !important;
  }

Cheers!

[Eidderf]

Hello master jedi,

It worked! Thank you, thank you so much 🙂

The X Jedi order is the best!

With endless gratitude,

Young padawan

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts