0

Please look at the official navbar example: https://getbootstrap.com/examples/navbar/

If you try to resize your browser you see this: enter image description here

Today I found the same problem on my website.

How to easily fix this behavior?

Sogl
  • 782
  • 3
  • 9
  • 29
  • Fix? What do you mean fix? That menu is responsive meaning it adjusts to browser width such that the entire menu is visible on full screen device. That menu looks generally fine to me. – zipzit Jun 21 '16 at 00:19
  • All menu must be displayed in one line, except for the collapse mode – Sogl Jun 21 '16 at 00:21
  • One line? What does that mean? All menu items in a vertical column on mobile mode or all menu items in one horizontal row in desktop mode? – zipzit Jun 21 '16 at 00:25
  • All menu items in one horizontal row in desktop mode. I said nothing about mobile view in my question. Take a closer look at the screenshot and example. – Sogl Jun 21 '16 at 00:33
  • Ah. I look at this site from my phone. That link shows a mobile menu, with all entries in a single column. You do realize that `Default`, `Static Top` and `Fixed Top` are all SUBMENU selections from `Dropdown`, right? Thats why they are on a separate line. Hint: Look at that link on a mobile phone FIRST, then look at it on a desktop site. If you don't have a mobile phone, use Chrome Developer tools, then select mobile icon @ top left of dev tools bar, to open a simulator. Test six times (portrait/landscape) x 3 sizes. Play with those 3 selections and scroll the screen on each device. – zipzit Jun 21 '16 at 03:21
  • A bootstrap menu is a functional menu that is responsive. It works on any device in any orientation. – zipzit Jun 21 '16 at 03:22
  • Look at this site in Chrome Developer tools with iPad in portrait mode and you'll understand what I'm talking about. – Sogl Jun 21 '16 at 03:40

1 Answers1

3

This menu has not enough space in one row. The right side part just does not fit in the same line. You can:

  1. reduce the number of menu items
    (for example, hide one of them by adding the hidden-sm class)
  2. make names of items shorter
  3. hide a word from the name:
    <li><a href="#">Something else<span class="hidden-sm"> here</span></a></li>
  4. reduce the distance between menu items
  5. reduce the width of the logo for this screen width
  6. expand the container or use container-fluid instead
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
  • I search something special, it can be css media query to handle only this problem part of page. Or use hamburger mobile menu earlier. – Sogl Jun 24 '16 at 11:47
  • @Sogl The `hidden-sm` class is analogous to the `@media (min-width: 768px) and (max-width: 991px) { .element { display: none; } }`. Also you can [change bootstrap navbar collapse breakpoint](http://stackoverflow.com/questions/37932542/). – Gleb Kemarsky Jun 24 '16 at 11:58
  • Big thanks! This method solved my problem. I hid font awesome icons with `hidden-sm` class from menu links. – Sogl Jun 26 '16 at 03:24