CODEWITHSUNDEEP
htmlcss
laker001
laker001

Reputation: 417

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)

Upvotes: 0

Views: 74

Answers (5)

Syam Pillai
Syam Pillai

Reputation: 5217

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

Upvotes: 1

dievardump
dievardump

Reputation: 2503

just remove the top padding on the login anchor :

#nav_login a { padding-top : 0; }

Upvotes: 1

Sazz
Sazz

Reputation: 119

You can also add 

margin-top: 16px

to your "#settings_icon" id. It would also solve your problem if you are just looking to align the icon.

Here is the link:http://jsfiddle.net/804jeg82/548/

Upvotes: -2

giorgio
giorgio

Reputation: 10202

Easier then you think, wrap it in an anchor ;)

<a href><i id="settings_icon" class="fa fa-cog" aria-hidden="true"></i></a>

I assume it has to be a link anyway, right?

Upvotes: 3

hdotluna
hdotluna

Reputation: 5732

Working Fiddle: http://jsfiddle.net/804jeg82/545/

I just added this on your css.

.navbar-nav {
  display: flex;
  align-items: center;
}

This is flexbox technique.

More about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope it helps you. Cheers mate!

Upvotes: 1

Related Questions