Docs

[Leanna]

Hi, you folks are awesome! I truly appreciate your excellent tech suppt which is one of the strongest points of the X theme.

My issue now: http://www.leannacinquanta.com main menu:

1) I want the submenu to drop down gently not suddenly in response to hover over main menu item.

With current code given below, it drops down suddenly and then disappears when I try to click a submenu item:

.masthead .x-navbar .desktop li > .sub-menu {
display: none;
}

.masthead .x-navbar .desktop li:hover > .sub-menu {
display: block;
}

2) I’d also like to make the submenu bg color semi-transparent and have submenu item’s bg color change color on hover.

Thanks…

[Leanna]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please remove the code, the submenu works without this code.

#2 Please add this :

ul.sub-menu {
    background-color: rgba(0,0,0,0.5) !important;
}
.desktop .sub-menu a:hover {
    background-color: rgba(255,0,0,0.5);
}

Hope it helps.

[Leanna]

Fantastic! Now can you make it dropdown on hover without needing to click the arrows?

[Christopher]

Hi there,

Dropdown menu works on hover on my end. Please clear cache and check again.

Hope it helps.

[Leanna]

Mouseover results in submenu appearing in IE but in Chrome and Firefox it is necessary to click the down arrows before the submenu appears even after dumping cache.

[Nabeel A]

Hi again,

I checked your site in FF and Chrome and the submenu appears on hover. Are you using a touch screen system?

Thanks!

[Leanna]

yes. if being a touch-screen computer is causing it not to drop down on hover, plz help me fix it because all menus on non-mobile device should drop down on hover…

[Lely]

Hello Leanna,

Please check this thread regarding detailed explanation for hover when you’re on touch screen:https://community.theme.co/forums/topic/dropdown-menus-not-working-correctly-on-ethos/#post-664893

Hope this helps.

[Leanna]

The thread is not helpful.
My dropdown works fine on touchscreen computer running IE so surely there’s a way to make it work on Chrome and Firefox.

I have Ubermenu installed on my other site http://www.tellasia.org and it has no problem dropping down with hover on my touchscreen computer running all browsers, but I’m trying to do away with it as it is a cumbersome plugin (I learned this after buying it) I wish to use X Theme’s menu only.

Please help me understand how to get X Theme’s menu to dropdown on hover on all popular browsers on any touchscreen device larger than ipad.

[Rad]

Hi Leanna,

What hybrid device you’re testing it on? It will work on mobile alone because the mobile features will be loaded, nothing more or less. The same goes for the desktop when it’s detected as desktop alone.

But the problem with the hybrid device is that all those features are loaded regardless of mobile or desktop since they are hybrid. For example, the functionality that is supposed to be loaded only on mobile is loaded in desktop as well because it’s also has a touch feature. And remember, touch feature has no Hover functionality on mobile devices.

Let’s use a pseudo code sample,

if mobile is detected :

load touch features

else if desktop :

load mouse control features

end;

Now, with a hybrid device, on which condition should it goes? We’ve been discussing this, and it’s been years and we’re still looking a better way to handle hybrid devices. But still no luck, hybrid always falls on the first condition (mobile with no mouse/pointing control). We can’t just assume that because it has high resolution then the device is always a desktop either.

With modern emerging devices with screen resolution as high as desktop and touch feature same as mobile. It’s hard to differentiate which is laptop or tablet just based on coding as they share same resolution and touch feature, well it’s easy to tell by eyes. Other solution could be detecting if a device has pointing accessories like mouse, touch pad, or etc. Through that, the code can easily tell if the device is a tablet or mobile since it doesn’t have a pointing device. But that isn’t possible yet since browsers have no direct control over the hardware.

Thanks for understanding.

[Leanna]

Hi Rad,
I truly appreciate the time you’ve taken to explain it to me. However the device I’m using is a normal touchscreen laptop running Win 10, it isnt a hybrid as such. Every other website I visit, the menu always drops down on hover. The plugin Ubermenu which is running my menu on http://www.tellasia.org also has no problem dropping down with mouseover. Therefore it is clear that somebody has the solution, even if X Theme doesn’t. I would like to understand why the Ubermenu drops down on hover with my touchscreen unit but X Theme menu doesn’t. If there is no way to fix it I guess I have no alternative but to ditch X theme menu and install Ubermenu or something similar.

[Rue Nel]

Hello There,

Looking at your site in site browser, I am see this: http://prntscr.com/bt601n
Could please take a screenshot of your site where the menu drops down on hover? This will give us the idea of what is going on in your browser.

Thank you in advance.

[Leanna]

When I CLICK on “About,” the resulting dorpdown looks exactly like in your screenshot. If I don’t click, no dropdown event occurs.

[Joao]

Hi There,

I have tested both of your sites on Chrome and Firefox and I could not replicate the issue.

On both sites the submenu drops on hover.

Please try using a different browser.

Let us know how it goes.

Joao

[Author]

Posts