Bootstrap navbar: brand on the left - login on the right - folding menu in the center

Question

I want to create a navigation panel with three parts: the logo of the logo on the right, the input buttons on the left and the centered folding menu:

Desktop:

mobile:

Download Demo

I have some problems with the current result:

• Cannot center the menu
• I want the minimize button to move to the other side of the page (against the brand). Button
• collapse (advanced menu) is not working properly. (see demo and image below).

this is the advanced menu:

In a few days I am afraid of this. I have tried so many things. this is my easiest attempt.

Answer 1

, . - :

.navbar {
  height: 60px;
}

:

.navbar {
  min-height: 60px;
}

:

.loginStatus{
   position: absolute;
   right:10px;
   top:10px;
}

@media (min-width: 200px){
  .loginStatus{
     right:100px;
  }
}
@media (min-width: 768px){
  .loginStatus{
    right:10px;
  }
}

, :

@media (min-width: 768px){
  .navbar-nav{
     text-align:center;
  }

  .navbar-nav {
      float: none !important;
      margin: 0;
  }
  .navbar-nav > li {
     float: none !important;
     display:inline-block !important;
  }
}

Answer 2

, .

text-center ul, css.

.navbar-nav {
    float: none !important;
    margin: 0;
}
@media (min-width: 768px){
.navbar-nav > li {
    float: none !important;
  display:inline-block !important;
}
}

, .