Fix burger menu in Gutenberg

When creating the project, you will notice that some of your burger menu functionalities are not functioning properly(ex. dropdown menu). This is due to some plugins having a conflict with other plugins. In this tutorial i will teach you how to fix that issues.

Add the style below in your style.css

/**
 * Burger Menu Navigation
 * */
nav.is-responsive .wp-block-navigation__responsive-container.is-menu-open{
    animation: overlay-menu__fade-in-animation 0.4s ease-out;
    animation-fill-mode: both;
    animation-direction: alternate;
}
body .wp-block-navigation.is-responsive:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{
    padding: 32px;
}
.wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{
    margin-left: 20px;
    margin-bottom: 8px;
    margin-top: 8px;
    display: none;
}
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 10px;
}
.wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu{
    /*    flex-direction: row;*/
}
.wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__container,
.wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
    width: 100%;
}

body .wp-block-column .wp-block-navigation .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle svg{
    height: auto;
    width: auto;
}

Add the js function below inside your jquery function

function submenu_toggle(){
        console.log("i'm here!");
        $('.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle, .wp-block-navigation-item .wp-block-navigation-submenu__toggle').click(function(){
            console.log("i got clicked!");
            var attrval = $(this).attr('aria-expanded');
            if(attrval === 'false'){
                $('.wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container').css('display','flex');
            }else{
                $('.wp-block-navigation.is-responsive .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container').css('display','none');
            }
        });
    }

That’s how you fix the burger menu in your website.
note: you can create your own fix for this issue and also modify it, the purpose of this is so that we can quickly fix the issues by copy and pasting the styles and script above.

Leave a Reply Cancel reply