XF 2.1 How to make navigation dropdown on hover

Mr Lucky

Well-known member
I have one site which has a combination of Wordpress and XenForo.

I am trying to style so the main navigation is the same for both, but one issue is that although the WP submenus dropdown on hover, the Xenforo ones don't. (I believe this is new since v2)

Some members are bit confused by this.

Does anyone know of a way to make this happen, or an add-on that might help?

Thanks
 
Only addon I know of for XF 2/2.1 is this one:


EDIT: Hmm, yeah, but doesn't look like the drop-downs open on hover. You could at least request the feature, though.
 
No the doesn't drop-downs open on hover. We use that addon and it is very good. But not for that problem.
Right. Not sure if we'll be seeing anyone adding that feature any time soon, since the trend seems to be developers getting away from it, I guess mainly because of mobile. Probably the easiest solution would be to change how the menus work on WP to be consistent with how they work on XF.
 
This is a weird workaround and only applies to the main navigation links, not the account/convo/alerts. That'd require additional template edits that I really don't have time for, nor do I know if it'd even work with how they load in alerts/convos. Additionally, this isn't going to work if you have a ton of links that use the scroller by default.

Place in extra.less
CSS:
@media (min-width: (@xf-responsiveWide + 1))
{
    .has-no-touchevents .p-nav, .has-no-touchevents .p-sectionLinks
    {
        .p-navEl[data-has-children]
            {
                position: relative;
                &:hover:not(.is-selected) .menu
                {
                    display: block;
                    opacity: 1;
                    top: @header-navHeight;
                    z-index: @zIndex-4;
                    
                }
                .p-navEl-splitTrigger { pointer-events: none; }
        }
        .hScroller { overflow: visible; }
        .hScroller-scroll
        {
            margin-bottom: 0 !important;
            overflow: visible;
            padding-bottom: 0 !important;
        }
    }
    .has-no-touchevents .p-sectionLinks .p-navEl[data-has-children]:hover:not(.is-selected) .menu { top: @header-subNavHeight; }
}
 
Last edited:
That is soooo much better for menu navigation! Thanks Russ.

Any chance of a snippet so the sub menus with drop downs operate in the same manner?

Also, there's a slight issue where if you have a lot of menu items and it slides behind your user name it shows through and the hover still activates it.

197513
 
That is soooo much better for menu navigation! Thanks Russ.

Any chance of a snippet so the sub menus with drop downs operate in the same manner?

Also, there's a slight issue where if you have a lot of menu items and it slides behind your user name it shows through and the hover still activates it.

View attachment 197513

Sadly the way the scroller was the setup I don't think it'll work well. You can change this line:

Code:
@media (min-width: (@xf-responsiveWide + 1))
which is 901px by default, to:

Code:
@media (min-width: 1200px)
which means only at screens 1200px or wider will the hover work. This way... as the screen gets smaller... it'll go back to the default XF method of clicking the arrows.
 
@Russ code works great. If only we could add the dropdown icon as well..! It doesn't appear on custom menu navigation items.

edit: Ok I got it. In order for the dropdown icon to show the parent (top level) item must be linked. In my case there isn't any link so I just used "#".
 
Last edited:
Top Bottom