[BZ] MenuFlex 2.1.0

[Hristo Avramov]

Make sure you save your options after any changes.

If you look at template bzmf_final.less it should look like this:

// [BZ] MenuFlex Final Compiled Styles & Assignments - Last Updated: November 20, 2025 04:09:47 UTC +0000
// Do not make changes within this template, they will be overwritten next time you save MenuFlex settings.

// Open Menus On Hover: Enabled - custom LESS and JavaScript are being injected
<xf:include template="bzmf_openmenusonhover.less" />
// Tiered / Nested Menus: Enabled - custom LESS and JavaScript are being injected
<xf:include template="bzmf_tieredmenus.less" />
// Font Awesome Menu Icons: Disabled

// [BZ] MenuFlex Final Compiled Styles & Assignments - END

This is how bzmf_final.less looks actually

/* [BZ] MenuFlex Tiered / Nested Menus BEGIN */
@media all and (min-width: 651px) {
    .menu--structural .menu-content {
        overflow: visible;
        user-select: none;
        border: 1px solid @xf-borderColor;
        border-top: 2px solid @xf-paletteColor1;
        
        > .nav-popout {
            position: relative;

            &.is-hovered > .nav-popout--menu,
            &.is-active > .nav-popout--menu,
            &:hover > .nav-popout--menu,
            &:focus-within > .nav-popout--menu {
                display: block;
                opacity: 1;
                transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
                transform: translateY(-2px);
            }

            .nav-popout--menu .nav-popout {
                &.is-hovered > .nav-popout--menu,
                &.is-active > .nav-popout--menu,
                &:hover > .nav-popout--menu,
                &:focus-within > .nav-popout--menu {
                    display: block;
                    opacity: 1;
                    transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
                    transform: translateY(-2px);
                }
            }

            .nav-container {
                position: relative;
                display: flex;
                align-items: center;
                transition: background-color .2s ease;

                .menu-linkRow {
                    flex: 1;
                    word-wrap: break-word;
                    overflow-wrap: break-word;
                    white-space: normal;
                    line-height: 1.4;
                    padding: 5px;
                    transition: background-color .2s ease, color .2s ease;
                }

                a.offCanvasMenu-link {
                    padding: 0 5px;
                }

                a.offCanvasMenu-link--splitToggle {
                    &:before {
                        top: 2px;
                        bottom: 2px;
                    }

                    &:after {
                        .m-faContent(@fa-var-solid-caret-right, 1.2em);
                        height: 1.2em;
                        display: block;
                        transform-origin: 47% 50%;
                        transform: rotate(0deg);
                        transition: transform .2s ease;
                    }

                    &.is-hovered:after,
                    &.is-active:after {
                        transform: rotate(90deg);
                    }
                }

                &:hover {
                    background: @xf-contentHighlightBg;
                }

                & .menu-linkRow:hover ~ a.offCanvasMenu-link--splitToggle:after,
                &.is-hovered a.offCanvasMenu-link--splitToggle:after {
                    transform: rotate(90deg);
                }
            }

            .nav-popout--menu {
                display: none;
                position: absolute;
                width: 250px;
                background: #ffffff;
                background: @xf-contentBg;
                border: 1px solid @xf-borderColor;
                border-top: 2px solid @xf-paletteColor1;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
                border-radius: 3px;
                right: -250px;
                top: 0;
                z-index: 10;
                opacity: 0;
                transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;

                &.is-hovered,
                &.is-active {
                    display: block;
                    opacity: 1;
                }

                &.is-closed:not(.is-hovered):not(.is-active) {
                    display: none;
                    opacity: 0;
                }

                &.tierlimit-0 {
                    position: static;
                    width: auto;
                    border: none;
                    box-shadow: none;
                    opacity: 1;
                    transform: none;
                    z-index: 0;

                    .nav-popout--menu {
                        display: block !important;
                        position: static !important;
                        width: auto !important;
                        border: none !important;
                        box-shadow: none !important;
                        opacity: 1 !important;
                        transform: none !important;

                        .nav-container {
                            > a {
                                .offCanvasMenu-link--splitToggle { display: none !important; }
                            }
                        }

                        .menu-separator { display: block !important; }
                    }
                }

                &.tierlimit-1 {
                    .nav-popout--menu {
                        display: block !important;
                        position: static !important;
                        width: auto !important;
                        border: none !important;
                        box-shadow: none !important;
                        opacity: 1 !important;
                        transform: none !important;
                        max-height: inherit;
                        overflow-y: inherit;
                    }
                    
                    a.offCanvasMenu-link--splitToggle { display: none !important; }
                        
                    .nav-container {
                        a.u-indentDepth1 { text-indent: 0em; }
                        a.u-indentDepth2 { text-indent: 1em; }
                        a.u-indentDepth3 { text-indent: 2em; }
                        a.u-indentDepth4 { text-indent: 3em; }
                    }
                    
                    .menu-separator:last-child {
                        display: block !important;
                    }
                }

                &.tierlimit-2 {
                    .nav-popout--menu > .nav-popout > .nav-popout--menu {
                        display: block !important;
                        position: static !important;
                        width: auto !important;
                        border: none !important;
                        box-shadow: none !important;
                        opacity: 1 !important;
                        transform: none !important;
                        max-height: inherit;
                        overflow-y: inherit;
                    }
                    
                    .nav-popout--menu {
                        a.offCanvasMenu-link--splitToggle { display: none !important; }

                        .nav-container {
                            a.u-indentDepth1 { text-indent: 0em; }
                            a.u-indentDepth2 { text-indent: 0em; }
                            a.u-indentDepth3 { text-indent: 1em; }
                            a.u-indentDepth4 { text-indent: 2em; }
                        }

                        .menu-separator:last-child {
                            display: block !important;
                        }
                    }
                }
            }
        }
    }
}

@media (hover: none) {
    .menu--structural .menu-content {
        > .nav-popout:not(.is-active):hover > .nav-popout--menu,
        .nav-popout--menu .nav-popout:not(.is-active):hover > .nav-popout--menu {
            display: none;
        }
    }
}

@media all and (min-width: 651px) and (max-width: 899px) {
    .menu--structural .menu-content {
        overflow-x: auto;

        .nav-popout {
            .menu-separator:last-child {
                display: block !important;
            }
        }

        > .nav-popout > .nav-popout--menu {
            display: block !important;
            position: static !important;
            width: auto !important;
            border: none !important;
            box-shadow: none !important;
            opacity: 1 !important;
            transform: none !important;
            z-index: 0 !important;

            .nav-popout--menu {
                display: block !important;
                position: static !important;
                width: auto !important;
                border: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

        .nav-container a.offCanvasMenu-link--splitToggle {
            display: none !important;
        }
    }
}

@media all and (min-width: 900px) and (max-width: 1199px) {
    .menu--structural .menu-content {
        .nav-container > a.u-indentDepth1 { text-indent: 0em; }
        .nav-container > a.u-indentDepth2 { text-indent: 1em; }
        .nav-container > a.u-indentDepth3 { text-indent: 2em; }
        .nav-container > a.u-indentDepth4 { text-indent: 3em; }

        > .nav-popout > .nav-popout--menu {
            right: -250px;
            max-height: 80vh;
            overflow-y: auto;

            .nav-popout {
                .menu-separator:last-child {
                    display: block !important;
                }
            }

            .nav-popout:hover > .nav-popout--menu {
                right: -250px;
                top: 100%;
                z-index: 20;
            }

            .nav-popout--menu {
                display: block !important;
                position: static !important;
                width: auto !important;
                border: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                transform: none !important;
                max-height: inherit;
                overflow-y: inherit;
            }

            .nav-container a.offCanvasMenu-link--splitToggle {
                display: none !important;
            }
        }
    }
}

@media all and (min-width: 1200px) and (max-width: 1499px) {
    .menu--structural .menu-content {
        .nav-container > a.u-indentDepth1 { text-indent: 0em; }
        .nav-container > a.u-indentDepth2 { text-indent: 0em; }
        .nav-container > a.u-indentDepth3 { text-indent: 1em; }
        .nav-container > a.u-indentDepth4 { text-indent: 2em; }

        > .nav-popout .nav-popout--menu > .nav-popout .nav-popout--menu {
            right: -250px;
            max-height: 80vh;
            overflow-y: auto;

            .nav-popout {
                .menu-separator:last-child {
                    display: block !important;
                }
            }

            .nav-popout:hover > .nav-popout--menu {
                right: -250px;
                top: 100%;
                z-index: 20;
            }

            .nav-popout--menu {
                display: block !important;
                position: static !important;
                width: auto !important;
                border: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                transform: none !important;
                max-height: inherit;
                overflow-y: inherit;
            }

            .nav-container a.offCanvasMenu-link--splitToggle {
                display: none !important;
            }
        }
    }
}

@media all and (min-width: 1500px) {
    .menu--structural .menu-content {
        .nav-container > a.u-indentDepth1 { text-indent: 0em; }
        .nav-container > a.u-indentDepth2 { text-indent: 0em; }
        .nav-container > a.u-indentDepth3 { text-indent: 0em; }
        .nav-container > a.u-indentDepth4 { text-indent: 1em; }

        > .nav-popout .nav-popout--menu > .nav-popout .nav-popout--menu > .nav-popout .nav-popout--menu {
            right: -250px;

            .nav-popout {
                .menu-separator:last-child {
                    display: block !important;
                }
            }

            .nav-popout:hover > .nav-popout--menu {
                right: -250px;
                top: 100%;
                z-index: 20;
            }

            .nav-popout--menu {
                display: block !important;
                position: static !important;
                width: auto !important;
                border: none !important;
                box-shadow: none !important;
                opacity: 1 !important;
                transform: none !important;
            }

            .nav-container a.offCanvasMenu-link--splitToggle {
                display: none !important;
            }
        }
    }
}
/* [BZ] MenuFlex Tiered / Nested Menus END */

 

[bzcomputers]

@Hristo Avramov That is the contents of bzmf_tieredmenus.less not bzmf_final.less

 

[Hristo Avramov]

On a stock install it works perfectly, must be some modification I have done somewhere. I will try to ask chatgpt

 

[bzcomputers]

On a stock install it works perfectly, must be some modification I have done somewhere. I will try to ask chatgpt

If you run into a roadblock trying to track it down just send me a PM, I'll help if I can.

 

[Alfre_DGR]

Can you add support for fontawesome 7.2.0?

 

[bzcomputers]

Can you add support for fontawesome 7.2.0?

I'll look into it, but no promises.

My intention was to only support whatever version was supported by XenForo itself. Supporting anything other than that would take a lot of additonal time to code and maintain.

 

[bzcomputers]

bzcomputers updated [BZ] MenuFlex with a new update entry:

2.1.0 – Major Enhancements, New Icon Editor & Bug Fixes

This release introduces a major overhaul of MenuFlex's Font Awesome icon configuration system, along with several enhancements, improvements, and bug fixes.

New Features & Enhancements

• Completely redesigned ACP icon editor, replacing the previous Singles, Pairs, Trios, and Quads configuration system with an intuitive visual interface.
• Navigation entries organized into dedicated tabs with expandable hierarchies, live icon previews, and icon-name suggestions.
• Individual...

Read the rest of this update entry...