Template for e-commerce navigation bar

      No Comments on Template for e-commerce navigation bar

Template for e-commerce navigation bar build in CSS using bootstrap framework. This template can be used effectively for any shopping web page.

Template for e-commerce navigation bar

Template for e-commerce navigation bar

Markup:

<header>
<div class="col-md-12" id="topbar">
<ul class="topbar_nav">
<li><a href="#">Help center</a></li>
<li><a href="#">24*7 Customer care</a></li>
<li><a href="#">Track orders</a></li>
<li> <span class="glyphicon glyphicon-bell"></span></li>
<li><a data-toggle='modal' data-target='#login'>Login/Signup</a></li>
<li>
<div class='dropdown'>
<a class='dropdown-toggle' type='button' data-toggle='dropdown'>Profile
<span class='caret'></span></a>
    <ul class='dropdown-menu' id='drop1'>
      <li><a href='#'>Account</a></li>
      <li><a href='#'>Orders</a></li>
      <li><a href='#'>Wishlist</a></li>
      <li><a href='#'>Logout</a></li>
    </ul>
  </div>
</li></ul>
</div><!--topbar-->
<div class="col-md-12" id="main_bar">
<div class="col-md-2" style="text-align: right;">Logo</div>
<div class="col-md-7">
<div class="input-group">
    <input type="text" class="form-control" placeholder="Search for product, brands, shops and more" style="font-size:12px;"/>
    <div class="input-group-btn">
      <button class="btn btn-re" type="submit" style="width:80px;" >
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</div>
<div class="col-md-2"><img src="images/cart.png" height="30" width="30" style="vertical-align:top;padding-right:5px;" alt="cart"/>
<span class="badge">0</span></div>
</div>
</header>

CSS:

body,li,ul,h1,h2,h3,h4,h5,h6,input,a,ol,div
{
    font-family:Tahoma, Geneva, sans-serif; 
}
/* topbar
-----------------------------------------------------------------------------*/
#topbar
{
    background-color:#333399;
    padding:0px 15px 0px 15px;
    color:#f2f2f2;
   
}
.topbar_nav
{
    float:right;
    margin-right:15%;
}
.topbar_nav li
{
   list-style:none;
   display: inline;
   float:left;
   padding:5px 10px 0px 10px;
   word-spacing: 2px;cursor:pointer; 
}
.topbar_nav a
{
    color:#e6e6e6;
    font-size:10.5px;
    text-decoration:none;
}
.topbar_nav a:hover
{
    text-decoration:none;color:#ffe6e6;
}
.dropdown .col-md-2 
{
    height:280px;
}
.dropdown a
{
    cursor:pointer;
}
#drop1
{
    width:100px;text-align:left;
}
#drop1 li
{
    padding:0px;width:100%;
}
#drop1 a
{
    border-bottom:solid 1px lightgray;
}

/* topbar 1-----------------------------------------------------------------------------*/
/*main bar*/
#main_bar
{
    padding:0px 2% 4px 3%;
    background-color:#333399;
    color:#f2f2f2;
}
.btn-re
{
    height:34.3px;background-color:#ff5050;
}
.glyphicon-search
{
    color:#f2f2f2;
}

Summary
Template for e-commerce navigation bar
Article Name
Template for e-commerce navigation bar
Description
Template for e-commerce navigation bar build in CSS using bootstrap framework. This template can be used effectively for any shopping web page.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

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