XF 2.2 How to make Navigation button dropdown not just arrow

[Davyc]

Here's one for those in the know. Currently when you have a Navigation menu item that contains children, the only way to initiate the dropdown to see said children is to click the dropdown arrow (shown by yellow arrow below). What I'm looking for is a solution to, is to make the menu button (red arrow below) clickable to show the children - not just the arrow. Anyone with a solution, I'd be grateful to know what it is. With thanks!

 

[Mr Lucky]

I have done that here:

Welcome to the Café: International Sax Forum

Debate, banter, ask questions, answer them or just sit back, relax and have fun

cafesaxophone.com

Is that what you mean? What I did was make it so that the top level nav did not have a link- just leave the link field empty in the navigation manager.



Instead when you click it shows the children dropdown.

In my case there is no actual "about" page, but with the main Forum tab I just added a link to the forums list as the first child. In your case if there is a movies page or forum you need to make it a child. (As I have done on the forum tab)

If you want a hover dropdown try this 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; }
}

 

[Davyc]

Spot on! Many thanks. The issue was resolved by removing the # (hashtag) from the link field; amazing how something so simple can be overlooked.

 

[Dragonfruit]

Removing the # seems to remove the fontawesome icon too, is there a way to make it work both ways?

 

[Mr Lucky]

Removing the # seems to remove the fontawesome icon too, is there a way to make it work both ways?

It doesn't do that. Check with default style and addons disabled.

 

[Davyc]

Removing the # seems to remove the fontawesome icon too, is there a way to make it work both ways?

I noticed that happened too, so I found this addon that works a treat and you can put whatever Icon you want to show. You need to use the icon name and not the code; example would be - fa-camera-movie

Unmaintained - [MMO] Navigation tab icons

Set icons for navigation tabs easily and quickly.

xenforo.com

 

[Dragonfruit]

I noticed that happened too, so I found this addon that works a treat and you can put whatever Icon you want to show. You need to use the icon name and not the code; example would be - fa-camera-movie

Unmaintained - [MMO] Navigation tab icons

Set icons for navigation tabs easily and quickly.

xenforo.com

That's a neat trick, thanks guys!