Bootstrap: How can I change the height of the navbar - twitter-bootstrap-3

Question

This is what I have so far: http://codepen.io/Pabi/pen/bdmgjm
Here is my CSS:
/*---------------------------------------------------
3.1 Topbar
---------------------------------------------------*/
#section-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
overflow: visible;
font: normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
/* border-bottom: 2px solid;
border-color: rgb(232,235,237);*/
}
/*Makes it so when you hover over the icon stays white*/
#section-topbar a {
color: #fff;
}
#section-topbar ul#nav > li {
display: block;
padding: 0;
}
#section-topbar ul#nav a {
display: block;
font: normal 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 18px 20px 18px 20px;
}
#section-topbar ul#nav .menu-item-left a:hover {
background: #222;
text-decoration: none;
}
#section-topbar ul#nav .active a {
background: #44bbaa;
}
#section-topbar ul#nav .active a:hover {
background: #44bbaa;
}
#section-topbar i {
font-size: 25px;
}
/*Center Brand on NavBar*/
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
How can I change the height of the navbar to something that is thinner and possible make the dropdown text with a dropdown icon next to it instead of a button.
Thank you very much.

Answer 1

One simple way would be to use the Sass or Less source and change the default value for $navbar-height
The nice thing about this, is that all the other calculations for top and bottom margins or padding of navbar elements will automatically adjust based on the new value. It's a far more maintainable and clean solution than trying to override the compiled styles.
With regard to making the dropdown text instead of a button, see the example from the bootstrap docs of the dropdown in a navbar, http://getbootstrap.com/components/#default-navbar:
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
You should be able to do something very similar inside of your <ul class="nav navbar-nav navbar-right"> element.

Answer 2

You can reduce the height of the topbar with smaller padding around the icons :
#section-topbar ul#nav a {
...
padding: 10px 20px;
}