It’s all managed with CSS. When we create widgets, some of the CSS selectors change, so the styling to initially show collapsed state no longer applies. Use your browser’s CSS inspector tool to identify the CSS of the main menu which collapses the menu. Add appropriate selectors from the widget menu to these rules so they too will be collapsed.
Some implementations use JavaScript to expand the collapsed menu on click event. The script typically adds another class to elements to have different CSS applied. You can see this happening in the inspector as you manipulate the menu. Be sure your widget menu does not have this class by default. The script might also need alteration to apply what it does to widget menus.
If your menu appears before or after all other widgets, you could apply the menu from the template instead of widgetizing it. That would save you from dealing with alternative CSS selectors due to the widget.
Thank you bcworkz, i need to apply and experience what you told me here before i can perceive the idea 🙂
Appreciate your valuable help
This is to share what i did, I play within the customizer , i discover that i forgot to add the sidebar menu widget to where it should go on the header section of mobile and tablet devices
Its working now …
Thanks
