Question

Problem: When loading a Bootstrap site on mobile, the menu disappears because of the nav-collapse media-query CSS. What I would like is to keep a minimalistic menu without the drop-down items. Is that possible?

If I were to add another simplistic navbar with just the top level <li>s, how do I apply a media-query to do the If-Else to choose appropriate navbar based on screen-size?

Answer 1

@media (max-width: 768px) {
 .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
   display: none;
 }
}

This will hide the drop-down menus for screens less than 768px.

Through other code drop-down opens on hover (rather than click) allowing me to use the click to redirect to page when media query hides the menu items.