I am looking to align the Login button with the settings icon on the same line above the links in my navbar.
Is there a way to accomplish this?
Check out this fiddle that demonstrates my issue:
Here is the code I have written:
<body>
<div>
<header>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid pull-right" id="nav_login">
<ul class="nav navbar-nav">
<li>
<a href="#">Login</a>
</li>
<li>
<i id="settings_icon" class="fa fa-cog" aria-hidden="true"></i>
</li>
</ul>
</div>
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a id="nav_processes" href="#">Processes</a>
</li>
<li>
<a id="nav_reports" href="#">Reports</a>
</li>
<li>
<a id="nav_alerts" href="#">Alerts</a>
</li>
<li>
<a id="nav_scheduler" href="#">Scheduler</a>
</li>
<li>
<a id="nav_admin" href="#">Admin</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
<div class="container-fluid" id="hidden_container">
<div id="processes_subnav" style="display: none;">
<ul class="nav navbar-nav">
<li>
<a href="#">Details</a>
</li>
<li>
<a href="#">Create</a>
</li>
</ul>
</div>
<div id="reports_subnav" style="display: none;">
<ul class="nav navbar-nav">
<li>
<a href="#">Details</a>
</li>
<li>
<a href="#">Assistance</a>
</li>
</ul>
</div>
</div>
</nav>
<div>
</div>
<footer></footer>
</div>
CSS:
* {
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-default .navbar-nav > li > a {
color: white;
}
.navbar-default {
background-color: black;
border-color: black;
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
color: white;
}
.navbar-default .navbar-nav > li > a {
outline: none;
}
#nav_login {
height: 10px;
font-size: 10px;
}
#settings_icon {
color: white;
font-size: 1.5em;
}
EDIT:
Apologies if my explanation was unclear, but what I really want is to have the login button beside the settings icon in the original position (upper right corner)