Do your dropdowns disappear after clicking?

[Meddysong]

I noticed on one of my sites (and so did my users, unfortunately) that the dropdown menus seemed very sensitive. Unless you're very quick, they disappear after clicking before you can get to your item.

I wasn't sure what to do about it and thought it was just a feature. This was backed up when the same thing happened with a new site. Sometimes it seems very bad (I've just had a complaint), other times they disappear but only if I deliberately hover away from the dropdown.

However, I've just noticed that on IPS's own site, if you click, the menu permanently opens. You can click it, go to a new tab, and it's still there when you return, only disappearing once you click elsewhere on screen.

That seems to me exactly how it's supposed to work, and so I'm confused why it's not working on my sites.

Is it just me?

If it isn't just me and this is working as standard, what have IPS done to theirs so that the list is visible until there's another click?

[JustHatched]

I have 3 boards and none have the issue you are having

[opentype]

I had this problem myself. Turns out, I changed the CSS in a way, so that there was a 1 pixel gap between the menu item and the sub-menu causing the hover to be turned off when the pointer crossed that area. So check your styling.  

[Meddysong]

^^ Thank you. One of my sites definitely has some styling in the header. I don't think that I've done anything to the fresh installation but I shall definitely have a look.

[beats23]

10 hours ago, Meddysong said:

I noticed on one of my sites (and so did my users, unfortunately) that the dropdown menus seemed very sensitive. Unless you're very quick, they disappear after clicking before you can get to your item.

I wasn't sure what to do about it and thought it was just a feature. This was backed up when the same thing happened with a new site. Sometimes it seems very bad (I've just had a complaint), other times they disappear but only if I deliberately hover away from the dropdown.

However, I've just noticed that on IPS's own site, if you click, the menu permanently opens. You can click it, go to a new tab, and it's still there when you return, only disappearing once you click elsewhere on screen.

That seems to me exactly how it's supposed to work, and so I'm confused why it's not working on my sites.

Is it just me?

If it isn't just me and this is working as standard, what have IPS done to theirs so that the list is visible until there's another click?

 

I also have this problem with a clean install IPS, default theme, no apps nor plugin. I have had no response about a fix or when It will be fixed by IPS.

I advise you to send in a support ticket as well about this bug.

 

[Meddysong]

Ah, I see. It's not just me then!

Glad to see that IPS is aware of it. It's not happening on this site, so let's hope that it's fixed in 4.4.

[opentype]

I still say it’s a design issue. It should be easy to narrow down with browser developer tools. That’s how I fixed it on my site. Your site isn’t publicly accessible though, or I would have checked it out already and advised what styling to change. 

[Meddysong]

I've just installed a clean default theme on another of my sites and although it's a bit better, it's still not perfect. The site in this clip is in production ready for launch at the weekend. Got to keep it offline because the address is known but the people who will be moderating it are only now getting their first looks. I'll send you a PM with credentials to log in as me 🙂

[Meddysong]

The situation, as confirmed by @opentype, seems also to apply to the default theme owing to a tiny gap between the menu and its items, meaning that there's a short moment when the hover is broken as you move from clicking the parent to selecting a child.

I've drawn up a little CSS fix on my site, which seems to be working. It might be useful for you too, @beats23:

/* Move the menu list closer to the parent to close the gap between them. The top value is calculated inline and each menu item has its own unique ID, so we need to use the !important tag to overwrite the inline styling and a CSS selector which targets all IDs starting with the bit leading up to the menu item's unique ID */

ul[id^="elNavigation_"] {
 top: 36px !important;
}

/* As a result of the above, the small triangle now overlaps the label on the menu item. It needs to be made smaller */

.ipsMenu:not( .ipsMenu_noStem ):before,.ipsMenu:not( .ipsMenu_noStem ):after {
    border-width: 10px;
}

/* Because the triangle is smaller, it's no longer showing in the centre. Need to adjust margin-left to compensate. It will equal the new border-width in the :after selector and (new border-width - 1px) in the :before (because the :before creates a shadow effect by being offset slightly) */

.ipsMenu.ipsMenu_bottomCenter:before {
    margin-left: -9px;
}
.ipsMenu.ipsMenu_bottomCenter:after {
	margin-left: -10px;	
}

 

[beats23]

16 minutes ago, Meddysong said:

The situation, as confirmed by @opentype, seems also to apply to the default theme owing to a tiny gap between the menu and its items, meaning that there's a short moment when the hover is broken as you move from clicking the parent to selecting a child.

I've drawn up a little CSS fix on my site, which seems to be working. It might be useful for you too, @beats23:

/* Move the menu list closer to the parent to close the gap between them. The top value is calculated inline and each menu item has its own unique ID, so we need to use the !important tag to overwrite the inline styling and a CSS selector which targets all IDs starting with the bit leading up to the menu item's unique ID */

ul[id^="elNavigation_"] {
 top: 36px !important;
}

/* As a result of the above, the small triangle now overlaps the label on the menu item. It needs to be made smaller */

.ipsMenu:not( .ipsMenu_noStem ):before,.ipsMenu:not( .ipsMenu_noStem ):after {
    border-width: 10px;
}

/* Because the triangle is smaller, it's no longer showing in the centre. Need to adjust margin-left to compensate. It will equal the new border-width in the :after selector and (new border-width - 1px) in the :before (because the :before creates a shadow effect by being offset slightly) */

.ipsMenu.ipsMenu_bottomCenter:before {
    margin-left: -9px;
}
.ipsMenu.ipsMenu_bottomCenter:after {
	margin-left: -10px;	
}

 

I copied and paste your code and also tried different pixel settings for 

ul[id^="elNavigation_"] {
 top: 36px !important;

No change, I sill have the problem.

I'll have to investigate some more.

Thanks 

[Meddysong]

Consider changing the values. Those ones work for my site; yours might require something different.

[Meddysong]

On 1/18/2019 at 10:48 AM, Meddysong said:

The situation, as confirmed by @opentype, seems also to apply to the default theme owing to a tiny gap between the menu and its items, meaning that there's a short moment when the hover is broken as you move from clicking the parent to selecting a child.

I've drawn up a little CSS fix on my site, which seems to be working.

Bah, there's a complicating factor which I hadn't thought of. This works fine with dropdowns in the primary nav bar. Unfortunately, it imposes the same conditions on dropdowns in the secondary dropdown too. Where I force 36px for primary (which is the calculated top position minus 2), I need a different value for dropdowns in the secondary bar (where calculated minus 2 is some very different value).

Unfortunately, I can't see a CSS solution. The system seems to create these dropdowns on clicking and they appear in the same place in the DOM with the top value calculated and added as a style element. There doesn't seem to be any way of selecting a <ul> dropdown list which appears on click based on whether it's parent is a primary or secondary item.

Has anybody checked whether this has been fixed on 4.4?

[steve00]

Not trying to be awkward here but have you tried with a different browser (at least then can eliminate if a browser specific issue with the css or not) ?

[marklcfc]

I've had this for years, really annoying

[Meddysong]

1 hour ago, steve00 said:

Not trying to be awkward here but have you tried with a different browser (at least then can eliminate if a browser specific issue with the css or not) ?

Just tried it in Firefox and I have it there too, although it doesn't appear to be so bad. It's present in the default theme too. Apparently IPS is aware of it although I don't know whether it's fixed in 4.4.

[steve00]

2 hours ago, Meddysong said:

Just tried it in Firefox and I have it there too, although it doesn't appear to be so bad. It's present in the default theme too. Apparently IPS is aware of it although I don't know whether it's fixed in 4.4.

Strange as using FF for ages now and never had an issue like that (or at least do not recall it)

[Meddysong]

This doesn't appear to have been fixed in 4.4, unfortunately. I've just tried it on an untouched default theme. In a couple of my menu items everything is perfect; but it never works at all with Activity.

As far as I can tell the difference is that there are items in the secondary menu for those items which also have a dropdown menu. The presence of the secondary navbar seems to prevent the break in the hover. In the unsuccessful instance, there is no secondary navbar and the hover state breaks. I'll report it to support in the hope of a fix because I've just lost a couple of hours trying to fix this on my theme. If it doesn't work with the default, then I think it probably lies with IPS to squash that bug.

[opentype]

Yeah, I also noticed it again on a client’s site with a stock theme. It’s not yet fixed. 

[Nihonto]

Can't believe this has still not been fixed.
Surely there must be a permanent fix and IPB should be working on it? Has it been reported as a bug?
Really irritating for myself and my members.