My top menu is displaying a gap when hovering over a particular menu item.
At first the groups are right at the bottom of the menu. But once the spacing issue happens all the groups have the small gap.
I’m thinking that it is happening because that is the longest group in the sub menus.
At this point, I don’t care about the gap anymore. I just want it to be consistent.
Any suggestions?
How is it set up? Are you using a Focus Group for the drop down?
Are you using borders, that causes the look of a gap?
It is done with groups and not focus groups.
There is an outset shadow with a blur radius of 2, everything else 0. All the groups have the same styling.
I would convert those groups to Focus Groups. That will allow you to set the positioning exactly and the length of your submenu can be as long as you want without affecting the rest of the page in anyway.
I was having trouble with the group focus and the invisible button method.
I think have a solution though.
Workflow 1: Do when invisible button is visible - show group focus
Workflow 2: Do when invisible button isn’t visible - hide group focus
Invisible Button Conditional 1: When group dashboard is hovered - element is visible
Invisible Button Conditional 2: When group focus is hovered - element is visible
But it isn’t right under the element now.
Also, how does group focus work in responsive?
OK I redid the header with group focus. The gap issue is no longer happening, yea!
But how does group focus work in responsive mode?
In the responsive mode, the group focus shows in the top left corner so I can’t test it in the editor.
The preview looks like this.
How can I get them to shrink?!
This topic was automatically closed after 70 days. New replies are no longer allowed.
