0

I am trying to use bootstrap to create a navbar. The left side of the navbar is the functional menu. The right side is nav buttons with the link to the control panel or logout page, etc.

The navbar looks like the following picture. navbar at work

When I reduce the size of the browser, it should look like the following picture. collapsed navbar

However, if the browser is in medium size, the navbar would look like the following picture.

problem with navbar

That is, the left navbar and right navbar are not inline, instead, they pile up together.

I am wondering how to make the left and right navbar always inline, or just collapse them.

The code is at: https://jsbin.com/qeduwujadu/3/edit?html,output

I tried to follow this post to solve this issue but failed.

Any help, please?

Community
  • 1
  • 1
Victor Gau
  • 191
  • 2
  • 11
  • 2
    You need a breakpoint where the two sides of the navbar collide to change the styling – Ted A. Mar 12 '16 at 02:49
  • Thanks for the tips. I used the code [here](http://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse) with modified max-width, and it resolves the issue. – Victor Gau Mar 12 '16 at 03:37

1 Answers1

0

One way I usually do is I don't let the code it self to decide when it should toggle because they usually do it for I think about a 600px screen. I force the display for certain screen sizes by using the visible-lg, visible-md, visible-sm, and visible-xs classes.

By putting that in the class name, bootstrap will detect the size and display according the what screen range it hits in. You could force it to show the nav bar when it shrink by adding visible-sm, and visible-xs.

Pro: More adaptability. Con: Increase space depending on how big the content is that you apply the class to.

Matthew
  • 3,136
  • 3
  • 18
  • 34