On Beaver Builder Theme, prevent the Navigation Menu from displaying submenu items on hover and instead do it on click.

bb-nav-menu-hover-to-click.php

<?php
add_action('wp_footer', function(){
    if ( is_admin() ) return;
    ?>
    <script id="remove-menu-hover">
        jQuery(document).ready(function($){         
            setTimeout(function(){
                $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children').off('mouseenter mouseleave');
                $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children > a').on('click', function(event){
                        event.preventDefault();
                }); 
                $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children').on('click', function(event){
                    $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children').removeClass('fl-sub-menu-open');
                    $(this).addClass('fl-sub-menu-open');
                    event.stopPropagation();
                });
                $(document).on('click', function(){
                    $('nav.fl-page-nav ul.navbar-nav > li.menu-item').removeClass('fl-sub-menu-open');
                });
            }, 1100);
        });
    </script>
    <?php
}, 900);

Thanx :) needed this one today :)

No doubt, thanks! I found some issues when resizing browser so I added that into the the mix. I only wanted to target one menu item in particular because it was a mega menu too, thus the reason for the #menu-item-12157. I also added a couple lines of CSS to make it all work proper too.

`jQuery( document ).ready(
function( $ ) {

     setTimeout(function(){
        $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children#menu-item-12157 > a').on('click', function(event){
            event.preventDefault();
        });
        $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children#menu-item-12157').on('click', function(event){
            $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children#menu-item-12157').removeClass('fl-sub-menu-open');
            $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children#menu-item-12157').removeClass('mega-menu-items-3');
            $(this).addClass('fl-sub-menu-open');
            $('.sub-menu', this).attr('style', 'opacity: 1 !important');
            event.stopPropagation();
        });
        
        $(document).on('click', function(){
            $('nav.fl-page-nav ul.navbar-nav > li.menu-item').removeClass('fl-sub-menu-open');
        });
    }, 100);

    $(window).on("load resize scroll", function() {

        setTimeout(function(){

            $('nav.fl-page-nav ul.navbar-nav > li.menu-item-has-children#menu-item-12157 .sub-menu').attr('style', '');

        }, 100);
    });

});`

#menu-item-12157 .sub-menu{ opacity: 0 !important; } #menu-item-12157 .sub-menu .sub-menu { opacity: 1 !important; }

@spencerslickremix Thanks for sharing your code!