Two rows with different sizes in Bootstrap Navbar - html

Question

I would like to have a Navbar in Bootstrap that looks like
+---------------------------------------------------+
| press | login | ... | <-second nav with smaller
+---------------------------------------------------+ height, text, ...
| LO | | | | |
| GO | HOME | FOO | BAR | | <-main menu with normal
+---------------------------------------------------+ height and text
Is there something like navbar-small in Bootstrap? Has someone any other hints how to do this with Bootstrap?
Here is my HTML markup:
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press</li>
<li>login</li>
<li>...</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME<span class="sr-only">(current)</span></li>
<li>FOO</li>
<li>BAR</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I want to have #second-nav smaller.

Answer 1

In your top navbar, the padding on the anchor elements is increasing the height. You can remove it using the following code. Output in Full screen.
#media (min-width: 768px) {
#second-nav li a {
padding: 0 15px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press
</li>
<li>login
</li>
<li>...
</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Beratungsansatz<span class="sr-only">(current)</span>
</li>
<li>HOME
</li>
<li>FOO
</li>
<li>BAR
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 2

Here is what I have in one of my application to adjust both the size of the font and the height of the navbar
.navbar-nav {
font-size: 15px;
line-height: 1.428;
}
You can adjust depending on what you mean by "small" and "normal"
Depending on how you structured the nav bar in your template/views you just call the class in the appropriate tag. This is an example with a ul list tag
<ul class="nav navbar-nav">
<!-- your links -->
</ul>

Answer 3

This is what you need dude
#second-nav li a {
padding: 0 15px;
}
#second-nav ul li {
display: inline;
list-style: none;
float: left;
}
div#second-nav {
float: right;
}
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press
</li>
<li>login
</li>
<li>...
</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Beratungsansatz<span class="sr-only">(current)</span>
</li>
<li>HOME
</li>
<li>FOO
</li>
<li>BAR
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
DEMO

Answer 4

I know you have an answer but this might be helpful anyways and takes the mobile viewport into consideration.
.navbar-default.nav-top ul {
display: inline-block;
float: right;
}
.navbar-default ul.navbar-top li {
float: left;
font-size: 11px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar-default nav-top">
<div class="container-fluid">
<ul class="nav navbar-top">
<li>press
</li>
<li>login
</li>
<li>.....
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/50x25/f00/f00">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span>
</li>
<li>Foo
</li>
<li>Bar
</li>
</ul>
</div>
</div>
</nav>