<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/erikcruz1/pen/yYpmRb?limit=all&page=37&q=mobile" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">/* container box shadow */
/* background nav color */
/* body background */
/* a tag color styling */
/* paragraph-color*/
/* footer background */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);
body {
background: -webkit-radial-gradient(center ellipse, #4c4c4c 0%, #131313 84%, #131313 100%);
background: radial-gradient(ellipse at center, #4c4c4c 0%, #131313 84%, #131313 100%);
max-width: 445px;
margin: 0 auto;
font-family: "Open Sans", sans-serif;
letter-spacing: .9px;
}
.container {
box-shadow: 0px 0px 32px 0px black;
}
.mobile-layout {
background: transparent;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.mobile-layout a {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
background: #2b737c;
width: 100%;
height: 100%;
/* border-bottom: 5px solid lighten($background-a, 10%);*/
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.mobile-layout a:hover {
background: #3896a2;
}
.mobile-layout a span {
font-weight: 300;
font-size: .7rem;
}
.mobile-layout .active {
background: #3896a2;
color: #fff;
}
.mobile-layout .fa {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
width: 100%;
height: 25px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.2rem;
}
.content {
font-weight: 300;
color: #555555;
background: #fff;
}
.content .title {
position: relative;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url(https://static.pexels.com/photos/442575/pexels-photo-442575.jpeg) no-repeat;
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url(https://static.pexels.com/photos/442575/pexels-photo-442575.jpeg) no-repeat;
background-size: cover;
width: 100%;
height: 250px;
}
.content .title h1 {
width: 300px;
margin: 0;
margin-left: 35px;
position: absolute;
bottom: 25px;
width: 60%;
color: #fff;
font-weight: 700;
font-size: 1.6rem;
letter-spacing: 1.5px;
}
.content p {
color: #727272;
font-weight: 300;
font-family: "Open Sans", sans-serif;
line-height: 23px;
margin: 0;
margin-left: 35px;
margin-right: 35px;
font-size: .9rem;
padding-top: 50px;
}
.content p:last-child {
padding-top: 40px;
padding-bottom: 50px;
}
footer {
width: 100%;
height: 70px;
background: #173e43;
color: rgba(255, 255, 255, 0.5);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 100;
font-size: .8rem;
}
</style></head><body>
<div class="container">
<nav class="mobile-layout">
<a href="#">
<i class="fa fa-home"></i>
<span>Home</span>
</a>
<a href="#">
<i class="fa fa-paint-brush"></i>
<span>Portfolio</span>
</a>
<a href="#">
<!-- svg logo goes here -->
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 128.663 128.685" style="enable-background:new 0 0 128.663 128.685;" xml:space="preserve">
<g>
<path style="fill:rgba(255,255,255,.9);" d="M99.586,21.828C99.586,10.427,89.577,0,73.032,0H56.766c-17.24,0-27.667,10.427-27.667,21.828v3.707
h18.083c0.095-6.137,4.777-9.547,10.558-9.547h13.208c5.978,0,10.705,3.476,10.705,9.732v31.644H47.172v-6.779h-3.953
c-9,0.167-12.125,0.104-13.472,3.061c-0.588,1.29-0.645,5.246-0.649,6.401v46.671c0,11.401,10.427,21.967,27.667,21.967h16.266
c16.545,0,26.555-10.566,26.555-21.967v-3.595h-4.95v0.003c-9,0.167-12.125,0.104-13.473,3.061c0,0,0,0.001,0,0.001
c0,0,0,0-0.001,0c-1.342,4.212-5.362,6.509-10.216,6.509H57.739c-5.839,0-10.566-3.476-10.566-9.733v-0.696V71.321h52.414V21.828z" />
<g>
<path style="fill:rgb(54,54,54);" d="M112.297,54.399h16.363c-0.521-15.793-10.833-25.3-21.941-25.3h-3.569v17.943
C108.073,47.118,111.238,50.147,112.297,54.399z" />
<path style="fill:rgb(54,54,54);" d="M112.535,73.081c-0.752,4.815-4.097,8.432-9.569,8.432H59.594
c-1.561,0.022-4.704,0.132-5.825,0.643c-2.947,1.342-2.894,4.456-3.059,13.391v4.04h56.01c11.141,0,21.479-9.963,21.943-26.506
H112.535z" />
<path style="fill:rgb(54,54,54);" d="M25.475,47.045v-0.023h23.604l28.994,0.012v-3.787c-0.167-9-0.104-12.125-3.06-13.472
c-1.517-0.691-6.732-0.649-6.732-0.649v-0.027H21.828C10.427,29.099,0,39.109,0,55.653V71.92
c0,17.239,10.427,27.666,21.828,27.666h3.707V81.503c-6.137-0.095-9.547-4.777-9.547-10.557V57.739
C15.988,51.841,19.377,47.17,25.475,47.045z" />
</g>
</g>
</svg>
<!-- logo ends -->
</a>
<a href="#" class="active">
<i class="fa fa-bookmark"></i>
<span>Blog</span>
</a>
<a href="#">
<i class="fa fa-envelope"></i>
<span>Contact</span>
</a>
</nav>
<div class="content">
<section class="title">
<h1>Better Mobile Experience</h1>
</section>
<p>Let's make our content visible, why hide it? Our goal is to keep users engaged and make it less difficult for the user to find what they are searching for. We can do this by having easier access to our nav content with a simple top bar nav menu as shown in this example.</p>
<p>You can also add a dropdown on one of the menu links and inside hide all the not so important links. Also another great option would be to hide or show the menu as they scroll. This way the user can focus on finding content with less hassle. What do you think?</p>
</div>
<footer>
<p>Made with ♥ by <a href="http://erikcruz.com/" style="color: #fff">Erik Cruz</a> 2016.</p>
</footer>
</div>
</body></html>
