Last active
April 27, 2017 18:42
-
-
Save shehabkhan013/d6008cf81024d38564bc5d6476b12e83 to your computer and use it in GitHub Desktop.
Menu With Shopping Cart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header class="header-area"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-3"> | |
<div class="logo"> | |
<h2><a href="index.html">Logo</a></h2> | |
</div> | |
</div> | |
<div class="col-md-9"> | |
<div class="mainmenu"> | |
<nav> | |
<ul> | |
<li><a href="">Home</a></li> | |
<li><a href="">About</a></li> | |
<li><a href="">Services</a></li> | |
<li><a href="">Blog</a></li> | |
<li><a href="">Contact</a></li> | |
</ul> | |
</nav> | |
<a href="" class="shopping-icon"><i class="fa fa-shopping-cart"></i> <span class="cart-icon-count">3</span></a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.header-area { | |
padding-top: 30px; | |
} | |
.logo { | |
margin: 10px 0; | |
} | |
.logo a { | |
color: #333; | |
padding: 10px 0; | |
} | |
.logo h2 { | |
margin: 0; | |
} | |
.mainmenu ul { | |
list-style: outside none none; | |
margin: 0; | |
padding: 0; | |
} | |
.mainmenu ul li { | |
display: inline-block; | |
} | |
.mainmenu ul li a { | |
color: #000; | |
display: block; | |
font-weight: 500; | |
padding: 20px 30px; | |
text-transform: uppercase; | |
} | |
.shopping-icon { | |
border: 1px solid #ddd; | |
border-radius: 50%; | |
color: #000; | |
font-size: 18px; | |
height: 53px; | |
line-height: 50px; | |
margin: 3px 0 0; | |
position: absolute; | |
right: 0; | |
text-align: center; | |
top: 0; | |
width: 53px; | |
} | |
.shopping-icon span { | |
background: #000 none repeat scroll 0 0; | |
border-radius: 50%; | |
color: #fff; | |
display: block; | |
font-size: 12px; | |
height: 25px; | |
line-height: 27px; | |
position: absolute; | |
right: -10px; | |
top: -5px; | |
width: 25px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment