0

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?

Prasad
  • 1,822
  • 3
  • 23
  • 40

2 Answers2

2

With Bootstrap responsive, the media query for the menu is 

@media (max-width: 979px) { }

Your could start by erasing all the .nav-collapse styles in this media query (so you have the same menu regardless the browser width), then rework the styles to achieve what you want. These styles are around line 650 if I remember correctly.

It would be better than adding another menu, which is poor semantically.

mddw
  • 5,570
  • 1
  • 30
  • 32
0
@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.

Prasad
  • 1,822
  • 3
  • 23
  • 40