Bootstrap navbar: brand on left - login on right - collapsible menu on center

I want to create a navbar with 3 parts: brand logo on right, login buttons on left, and a centered collapsible menu:

desktop:

mobile:

Demo on bootply

I have some problems with the current result:

  1. can't align menu on center
  2. I want the collapse button go to the other side of the page (against brand)
  3. collapse button (expanded menu) is not working properly. (see the demo and image below)

this is the expanded menu:

it's a few days that I'm struggling with this. I have tried so many things. this is my most strait attempt.

Answers


Hope it helps.

I have added text-center class on ul and i have used below css.

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

please take a look here and let me know.

Thanks


Thanks to Sunil Gehlot, I solved it. The height problem was because of this:

.navbar {
  height: 60px;
}

I changed it to this:

.navbar {
  min-height: 60px;
}

and to position the login buttons I used absolute positioning:

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

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

I wanted menu items to be centered in desktop and normally aligned in mobile:

@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;
  }
}
Full Demo

Need Your Help

Heroku: encapsulate data access in an API

ruby-on-rails ruby database api heroku

I have a Heroku app with a PostgreSQL DB. Now I want to have a seperate process, possibly on a different machine, to access the DB. The suggestion on the Herkou site is actually what I wanted to do

Select boostrap lost styles after click

asp.net twitter-bootstrap select

Hi everybody i have another problem with bootstrap. When I push the button for register the information all select control lost the styles. Maybe i did something wrong. Please help me