Vertical align button in the navigation bar

Question

I'm doing a website using the Twitter-Boostrap framework and I would like to put a navbar-toggle button at the far right side of the navigation bar, aligned exactly in the middle.

How can I do this?

Here is what I did:

 .navbar-default .container { position: relative; } .navbar-default .navbar-toggle { background-color: #2E8B57; border: 5px solid #FFFFFF; box-shadow: 1px 1px 1.5px #FFFFFF; padding: 8px 10px 8px 10px; position: absolute; right: 0; top: 13px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!--Container--> <div class="navbar-header"> <div class="navbar-brand"> <a href="index.html">Food, LLC</a> </div> </div> <!--END Navbar-header --> <!-- Toggle Button --> <button type="button" class="navbar-toggle collapsed visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- End Container --> </nav> <!-- End Navigation --> 

Answer 1

Instead of using top: 13px; use top: 50% with transform: translateY(-50%) , see the following snippet:

 .navbar-default .container { position: relative; } .navbar-default .navbar-toggle { background-color: #2E8B57; border: 5px solid #FFFFFF; box-shadow: 1px 1px 1.5px #FFFFFF; padding: 8px 10px 8px 10px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!--Container--> <div class="navbar-header"> <div class="navbar-brand"> <a href="index.html">Food, LLC</a> </div> </div> <!--END Navbar-header --> <!-- Toggle Button --> <button type="button" class="navbar-toggle collapsed visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- End Container --> </nav> <!-- End Navigation -->