<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="container">
<div class="row set">
<div class="col-sm-10 col-xs-10 h-text h-color">
<h5>Mobile Menu</h5>
</div>
<div class="col-sm-2 col-xs-2 menu h-text h-color">
<a href="#" id="btn-menu"><i class="fa fa-bars"></i></a>
</div> <!-- header section -->
<div class="mobile-menu btn-toggle" id="the-menu">
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
</ul>
</div> <!-- end menu -->
<div class="row content">
<div class="col-sm-12 col-xs-12">
<h1>Content head</h1>
<h2>content sub</h2>
<p>Content</p>
<p>Content...</p>
</div>
</div> <!-- end row -->
</div> <!-- end row -->
<div class="row">
<div class="col-sm-12 col-xs-12 footer">
</div>
</div> <!-- end footer -->
</div> <!-- end container -->
</body>
body{
background-color:#e5e5cc;
}
.set{
height:450px;
}
.container{
max-width:320px;
margin-top: 10px;
background-color:#f6f6ee;
}
.h-color{
background-color:#99994d;
height:50px;
}
.h-text{
padding:10px;
color:#fff;
}
.fa-bars{
font-size:30px!important;
}
.menu{
text-align:right;
}
.menu a{
color:#fff;
text-decoration:none;
}
.mobile-menu{
display:none;
width:100%;
height:164px;
float:right;
margin-top:1px;
margin-right:1px;
text-align:right;
background: #666633;
background: -webkit-linear-gradient(left, #f6f6ee, #666633);
background: -o-linear-gradient(right, #f6f6ee, #666633);
background: -moz-linear-gradient(right, #f6f6ee, #666633);
background: linear-gradient(to right, #f6f6ee, #666633);
}
li{
border-bottom:1px dotted #fff;
list-style:none;
display:block;
padding:10px;
}
li a{
color:#fff;
}
li a:hover{
text-decoration:none;
color:#33331a;
}
li:hover{
position:relative;
left:-5px;
}
.footer{
height:25px;
background-color:#666633;
}
.article-img{
background-color:black;
height:70px;
width:70px;
}
.content{
margin-top:0px;
padding:10px;
}
