laker001 laker001 - 3 months ago 18
CSS Question

subnavbars inside a navbar html css

I want to align the Login button with the settings icon along a line above the links from my navbar.

How can i achieve this?

Here's a fiddle that illustrates exactly my problem:

FIDDLE

and the code i wrote:

<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:

Sorry, maybe i didn't explained myself well, but i want the login to be alongside the settings icon where it originally was (in the upper right corner)

Answer

Small changes

HTML:

<ul class="nav navbar-nav right">
      <li>
        <a href="#">Login</a>
      </li>
      <li>
        <i id="settings_icon" class="fa fa-cog" aria-hidden="true"></i>
      </li>
    </ul>

CSS:

.nav.navbar-nav.right{
  display: flex;
  align-items: center; 
 }
 .nav.navbar-nav.right li a{
   padding: 0 10px;
 }

Here is the updated Demo