XF 2.1 How to make navigation dropdown on hover

[Mr Lucky]

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

 

[xffutureuser]

There is no add-on for this yet?

 

[Sven]

does not get help

 

[imno007]

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

[cXF] Top Navigation

This is a cXF Pack C Membership Add-on. Upgrade your account to cXF Pack C Membership for: 1-year access to all cXF Pack C Membership Add-ons for XenForo 2 1-year access to all cXF Premium Customizations for XenForo 2 If you got our...

xenforo.com

EDIT: Hmm, yeah, but doesn't look like the drop-downs open on hover. You could at least request the feature, though.

 

[kelle67]

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.

 

[imno007]

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.

 

[Mr Lucky]

Probably the easiest solution would be to change how the menus work on WP to be consistent with how they work on XF.

 

[xffutureuser]

If nobody makes that add-on, I will get it done.

 

[kelle67]

I still have a 1.5 running locally on my computer.
There it is as you like it.
If somebody has an idea what I have to look for I can do it with pleasure.

View attachment Aufnahme-9.mp4

 

[Russ]

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

@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; }
}

 

[Mr Lucky]

Thanks Russ, works nicely!

 

[imno007]

Yeah, not so hard when you have an expert on hand

 

[RobinHood]

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.

 

[Russ]

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:

@media (min-width: (@xf-responsiveWide + 1))

which is 901px by default, to:

@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.

 

[Mr Lucky]

With that many menu items I'd consider having a wider responsive breakpoint

 

[Russ]

@RobinHood I've edited my original CSS, it should make the sub-navigation menus open upon hover.

 

[Masetrix]

Has unfortunately in XF 2.1.1 with default style no effect ...

 

[RobinHood]

Works fine for me on 2.1.1

 

[Masetrix]

Works fine for me on 2.1.1

Yes, tested now. It works here too, but only on the Desktop PC, not on the Tablet with mouse in the Dogginstation ...

 

[GPA-R]

@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 "#".