XF 2.2 How to make Navigation button dropdown not just arrow

Davyc

Well-known member
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!

1697641716089.png
 
Solution
I have done that here:


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.

Screenshot 2023-10-18 at 17.43.53.png

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:

Code:
@media (min-width: (@xf-responsiveWide + 1))
{
    .has-no-touchevents .p-nav, .has-no-touchevents .p-sectionLinks
    {
        .p-navEl[data-has-children]...
I have done that here:


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.

Screenshot 2023-10-18 at 17.43.53.png

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:

Code:
@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:
Solution
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

 
Back
Top Bottom