Navigation bar UI

      No Comments on Navigation bar UI

Navigation bar UI -a snippet which uses bootstrap navigation bar and turns it to a more attractive looking navigation with additional CSS.

Navigation bar UI

Demo:

See the Pen Bootstrap navigation with CSS by scanfcode (@scanfcode) on CodePen.

HTML Markup:

<nav id="scanfcode" class="navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" id="toogle-button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <span class="glyphicon glyphicon-menu-hamburger"></span>                     
      </button>
      <a id="logo" class="navbar-brand" href="#">Scanfcode</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
 
      <ul id="link" class="nav navbar-nav navbar-right">
         <li class="dropdown" id="first-link">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href='#'>Sign In</a></li>
        <li id="button-link"><a href="#">Sign Up</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

CSS:

body
{
  background:#e6e6ff;
  font-family: 'Encode Sans', sans-serif;
}
/* navigation bar */
#scanfcode
{
  border-radius:0px;
  background:#fff;
  padding:10px;
  font-size:17px;
}
/* logo or main heading */
#logo
{
  font-size:20px;
  font-weight:bolder;
  color:#00004d;
  letter-spacing:2px;
}
/* navigation links*/
#link a
{
  color:#01325d;
  margin:0 20px 0 10px;
  letter-spacing:1.5px;
}
/* navigation link with right border */
#first-link
{
  padding-right:6px;
  border-right:solid 1px #ccc;
}
/* sign up link button and toggle button */
#button-link , #toogle-button
{
  color:#f2f2f2;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0,0,0,.2);
  border-radius: 2px;
  background-color: #fa6a48;
  line-height: 17px;
}
#button-link a
{
  color:#f2f2f2;
}

Navigation bar UI
Navigation bar UI

Summary
Navigation bar UI
Article Name
Navigation bar UI
Description
Navigation bar UI -a snippet which uses bootstrap navigation bar and turns it to a more attractive looking navigation with additional CSS.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *