Menu is Gone when using Bootstrap
This is a Developer Level doc.
If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.
If the website's main menu display is suddenly affected after using features that utilize Bootstrap (menu from the header is not displaying or submenu items are not displaying), add the code below:
/* Resolve Main Menu Display When Using Boostrap */
#site-navigation-wrap .dropdown-menu {
display: block;
float: none;
position: relative;
top: auto;
left: auto;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
If you're displaying menu in the Top Bar area as well, thus the issues you experience with the menu or submenu items display are also affecting the Top Bar menu functionality, use this code instead:
/* Resolve Main Menu and Top Bar Menu display when using Bootstrap */
#top-bar .dropdown-menu, #site-navigation-wrap .dropdown-menu {
display: block;
float: none;
position: relative;
top: auto;
left: auto;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.