How to fix hidden navbar?
up vote
0
down vote
favorite
So I created a simple nav that looks good.
But I have trouble making it mobile friendly.
For the base, I used a code from CodePen.
When I start building on it I realized when the page was loaded on my phone.
And I taped (on the place where the <li> would be hidden) on the screen I would go to a section of the website.
Later I realized it was the nav that was not really hidden.
But when you open and close the nav than the hidden <li> really become hidden.
Here is the site that I build (on CodePen).
* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
font-family: 'Poppins', sans-serif;
font-weight: 400;
background: #444;
background-position: center;
background-size: cover;
}
h1{
text-transform: uppercase;
padding: 1.5rem 0 1.2rem 0;
font-weight: bolder;
font-size: 20px;
}
h2{
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
margin: 0;
}
p{
padding: 0;
margin: 0;
color: #DDD;
font-size: 15px;
}
img{
max-height: 350px;
max-width: 350px;
width: 100%;
display: block;
vertical-align: middle;
text-align: center;
}
.space{
padding-bottom: 4rem;
}
.container{
width: 80%;
margin: 0 auto 3rem auto;
color: #fff;
}
.clear{
position: inherit;
top: 0;
left: 0;
height: 8rem;
margin: 0;
}
.fixed{
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 6rem;
background: #fff;
z-index: 999;
}
nav{
width: 70%;
margin: 25px auto;
padding: 0;
}
.logo {
float: left;
padding: 0;
margin-top: 16px;
}
.logo a {
color: #000;
text-transform: uppercase;
font-weight: 900;
font-size: 18px;
letter-spacing: 0px;
text-decoration: none;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.2px;
font-weight: 600;
}
@media screen and (max-width: 864px) {
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -999;
background: #000;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding: 0 20% 0 0;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:nth-child(6) a {
transition-delay: 0.7s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease-in-out;
}
.nav-btn {
position: fixed;
right: 13%;
top: 30px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #000;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease-in-out;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.times{
margin: 2rem 0 2rem 0;
width: 100%;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.times{
max-width: 100%;
}
.times h1{
padding: 1.5rem 0 0 0;
}
.times .space{
padding-bottom: 2rem;
}
}
@media screen and (min-width: 600px){
.times .space:first-child{
display: inline-block;
padding-right: 2rem;
}
}
@media screen and (min-width: 800px){
.times .space{
padding-right: 0;
}
.times{
margin-top: 0;
height: auto;
}
}
.img01{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-01.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img02{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-02.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img03{
min-height: 300px;
height: 100%;
width: 100%;
margin-bottom: 2rem;
background: url(../images/yt.gif) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
@media screen and (min-width: 600px){
.img01, img02, img03{
height: 150px;
}
}
.video-container {
position: relative;
padding-bottom: 62.25%;
padding-top: 0px;
overflow: hidden;
margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-bg, .sec-01, .sec-02{
margin-bottom:2rem;
max-width: 350px;
width: auto;
max-height: 350px;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.img-bg{
max-width: 100%;
}
}
@media screen and (min-width: 600px){
.img-bg{
max-width: 45%;
}
}
.sec-02{
text-align: left;
padding: 0 2rem 2rem 2rem;
}
.sec-02 p{
padding-bottom: 2rem;
}
.logo-bg{
width: 100%;
padding-bottom: 1rem;
background: url(../images/logo-bg.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.logo-bg img{
display: block;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 500px){
.logo-bg{
max-width: 100%;
width: 100%;
}
}
.follow{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0;
background-color:#111;
color:#fff;
text-align: center;
}
.follow a, .follow a:link, .follow a:visited{
color: #fff;
}
@media screen and (min-width: 500px){
.follow{
width: 100%;
max-width: 100%;
}
.follow h1{
padding-bottom: 0;
margin-bottom: 0;
}
.follow p{
display: none;
}
.follow .space{
margin-right: 100px;
display: inline-block;
padding-bottom: 2rem;
}
.follow .space:last-child{
margin: 0;
}
}
.social{
text-align: center;
}
.icon{
font-size: 4em;
}
.welcome, .service, .price{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
color: #fff;
}
.welcome p{
color: #fff;
}
.welcome p{
font-size: 20px;
}
.shop{
background: #fff;
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
text-align: center;
color: #000;
}
.shop p{
color: #111;
}
@media screen and (min-width: 800px){
.welcome{
height: auto;
}
}
.service h1, .price h1{
text-align: left;
}
.service h2, .price h2{
color: #fff;
text-align: left;
padding-bottom: 0.5rem;
}
.service p{
color: #fff;
text-align: left;
}
.price p{
color: #fff;
text-align: left;
}
.price p{
font-size: 14px;
text-align: center;
}
table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: inherit;
width: 100%;
}
tr{
display: table-row;
vertical-align: middle;
border-color: inherit;
}
td{
vertical-align: middle;
display: table-cell;
border-bottom: 1px solid #fff;
}
.left{
width: 100%;
text-align: left;
}
.right{
width: 1%;
text-align: right;
}
.about{
margin-bottom:2rem;
width: 100%;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.about p{
text-align: left;
}
@media screen and (min-width: 500px){
.about{
width: 100%;
max-width: 100%;
}
}
.contact{
margin-bottom:2rem;
max-width: 100%;
width: auto;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.contact p{
margin-top: 1rem;
margin-bottom: 2rem;
}
.info{
margin-bottom: 2rem;
}
.info p {
font-size: 0.75em;;
margin-bottom: 1rem;
}
@media screen and (min-width: 400px){
.info p{
font-size: 15px;
}
}
.form{
margin-bottom: 2rem;
}
.form h2{
font-size: 20px;
}
form {
margin:0 auto;
width: 100%;
}
/* Style the text boxes */
input, textarea {
display: inherit;
font-family: 'Poppins', sans-serif;
font-weight: 400;
width: -webkit-fill-available;
min-width:100%;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:0.8rem;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
max-width: 10px;
min-height:10rem;
height: auto;
}
input:focus, textarea:focus {
border:1px solid #444;
}
#submit {
font-family: 'Poppins', sans-serif;
font-weight: 400;
text-align: center;
width:100%;
height:auto;
border:none;
margin-top:20px;
cursor:pointer;
background: #111;
color: #fff;
border: 2px solid #fff;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#submit:hover {
background: #efefef;
color: #111;
border: 2px solid #111;
}
.maps{
margin: 0;
height: 14rem;
}
.stroke{
height: 2px;
width: 100%;
background: #efefef;
margin-bottom: 2rem;
}
@media screen and (max-width: 400px){
.price b{
font-size: 13px;
}
}
@media screen and (min-width: 800px){
.stroke:last-child{
margin-bottom: 0;
margin-top: 2rem;
}
.wrapper{
height: 100%;
margin: 2rem 0 2rem 0;
display: flex;
}
.first-w{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #fff;
}
.second-w{
vertical-align:top;
display: inline-block;
flex: 1;
background: #fff;
}
.first-b{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #111;
}
.second-b{
vertical-align:top;
display: inline-block;
flex: 1;
background: #111;
}
.times, .welcome{
margin-bottom: 1rem;
}
.about, .service, .price{
background: none;
margin-bottom: 0;
}
.maps{
height: 100%;
}
.form{
margin-bottom: 0;
}
}<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== 0) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 122
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
history.pushState(null, null, hash);
});
} // End if
});
});
</script>
<!-- Standard Favicon -->
<link rel="icon" type="image/png" href="fav.png" />
<!-- For iPhone 4 Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="114-fav.png">
<!-- For iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="72-fav.png">
<!-- For iPhone: -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="57-fav.png">
</head>
<body>
<div class="container">
<div class="fixed">
<nav class="nav">
<input type="checkbox" id="nav" style="display: none">
<label for="nav" class="nav-btn" onclick="myFunction()">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a>MENU</a>
</div>
<div class="nav-wrapper" id="nav-wrapper">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#price">Price</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="clear" id="home"></div>
<div class="logo-bg">
<div><img src="images/logo.png" alt="Logo"></div>
</div>
<div class="wrapper">
<div class="first-b">
<div class="times">
<div><h1>Times</h1><br></div>
<div class="space">
<h2>Text & Text</h2>
<p>Text</p>
</div>
<div class="space">
<h2>Text - Text</h2>
<p>Text UUR - Text UUR</p>
</div>
</div>
</div>
<div class="second-b">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>Text</p></div>
</div>
</div>
</div>
<div class="img01"></div>
<div class="wrapper">
<div class="first-b">
<div class="about" id="about">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
</div>
</div>
</div>
<div class="second-b">
<div class="follow">
<div><h1>Text</h1><br></div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-facebook-f"></i></div>
<p>#Text</p>
</a>
</div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-instagram"></i></div>
<p>@Text</p>
</a>
</div>
</div>
</div>
</div>
<div class="img02"></div>
<div class="wrapper">
<div class="first-b">
<div class="service" id="service">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
<p> </p>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
</div>
</div>
</div>
<div class="second-b">
<div class="price" id="price">
<div><h1>Text</h1></div>
<div>
<table>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text <sup>t/m Text</sup></b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
</table>
</div>
<div> </div>
<div><i><p>Text</p><p>Text</p></i></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="first-w">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="img03"></div>
</a>
</div>
<div class="second-w">
<div class="shop" id="shop">
<div><h1>Text</h1></div>
<div>
<h2>Text</h2>
</div>
<div><i><p>... Comming Soon ...</p></i></div>
</div>
</div>
</div>
<div class="contact" id="contact">
<div><h1>CONTACT</h1></div>
<div class="wrapper">
<div class="first-b">
<div class="info">
<div><h2>Adres</h2><p>Text Text<br>Text Text</p></div>
<div><h2>Tel.Nr.</h2><p>Text</p></div>
<div><h2>Email</h2><p>Text</p></div>
</div>
<div class="stroke"></div>
<div class="form">
<div><p><i>Text</i></p></div>
<div><h2>CONTACT FORMULIER</h2></div>
<form id="ajax-contact" method="post" action="mail.php">
<input type="text" id="name" name="name" placeholder="Text" required>
<input type="email" id="email" name="email" placeholder="Text" required>
<textarea id="message" name="message" placeholder="Text" required></textarea>
<input id="submit" name="submit" type="submit" value="Verzenden">
</form>
<h1><div id="form-messages"></div></h1>
</div>
<div class="stroke"></div>
</div>
<div class="second-b">
<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=#" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-wrapper");
if (x.style.display === "block") { //Show
x.style.display = "none"; //Hide
} else {
x.style.display = "block"; //Show
}
}
</script>
</body>
</html>html css mobile nav
edited Nov 11 at 18:25
WC2
1889
asked Nov 10 at 17:33
Cross Production
106
add a comment |
up vote
0
down vote
favorite
So I created a simple nav that looks good.
But I have trouble making it mobile friendly.
For the base, I used a code from CodePen.
When I start building on it I realized when the page was loaded on my phone.
And I taped (on the place where the <li> would be hidden) on the screen I would go to a section of the website.
Later I realized it was the nav that was not really hidden.
But when you open and close the nav than the hidden <li> really become hidden.
Here is the site that I build (on CodePen).
* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
font-family: 'Poppins', sans-serif;
font-weight: 400;
background: #444;
background-position: center;
background-size: cover;
}
h1{
text-transform: uppercase;
padding: 1.5rem 0 1.2rem 0;
font-weight: bolder;
font-size: 20px;
}
h2{
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
margin: 0;
}
p{
padding: 0;
margin: 0;
color: #DDD;
font-size: 15px;
}
img{
max-height: 350px;
max-width: 350px;
width: 100%;
display: block;
vertical-align: middle;
text-align: center;
}
.space{
padding-bottom: 4rem;
}
.container{
width: 80%;
margin: 0 auto 3rem auto;
color: #fff;
}
.clear{
position: inherit;
top: 0;
left: 0;
height: 8rem;
margin: 0;
}
.fixed{
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 6rem;
background: #fff;
z-index: 999;
}
nav{
width: 70%;
margin: 25px auto;
padding: 0;
}
.logo {
float: left;
padding: 0;
margin-top: 16px;
}
.logo a {
color: #000;
text-transform: uppercase;
font-weight: 900;
font-size: 18px;
letter-spacing: 0px;
text-decoration: none;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.2px;
font-weight: 600;
}
@media screen and (max-width: 864px) {
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -999;
background: #000;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding: 0 20% 0 0;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:nth-child(6) a {
transition-delay: 0.7s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease-in-out;
}
.nav-btn {
position: fixed;
right: 13%;
top: 30px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #000;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease-in-out;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.times{
margin: 2rem 0 2rem 0;
width: 100%;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.times{
max-width: 100%;
}
.times h1{
padding: 1.5rem 0 0 0;
}
.times .space{
padding-bottom: 2rem;
}
}
@media screen and (min-width: 600px){
.times .space:first-child{
display: inline-block;
padding-right: 2rem;
}
}
@media screen and (min-width: 800px){
.times .space{
padding-right: 0;
}
.times{
margin-top: 0;
height: auto;
}
}
.img01{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-01.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img02{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-02.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img03{
min-height: 300px;
height: 100%;
width: 100%;
margin-bottom: 2rem;
background: url(../images/yt.gif) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
@media screen and (min-width: 600px){
.img01, img02, img03{
height: 150px;
}
}
.video-container {
position: relative;
padding-bottom: 62.25%;
padding-top: 0px;
overflow: hidden;
margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-bg, .sec-01, .sec-02{
margin-bottom:2rem;
max-width: 350px;
width: auto;
max-height: 350px;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.img-bg{
max-width: 100%;
}
}
@media screen and (min-width: 600px){
.img-bg{
max-width: 45%;
}
}
.sec-02{
text-align: left;
padding: 0 2rem 2rem 2rem;
}
.sec-02 p{
padding-bottom: 2rem;
}
.logo-bg{
width: 100%;
padding-bottom: 1rem;
background: url(../images/logo-bg.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.logo-bg img{
display: block;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 500px){
.logo-bg{
max-width: 100%;
width: 100%;
}
}
.follow{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0;
background-color:#111;
color:#fff;
text-align: center;
}
.follow a, .follow a:link, .follow a:visited{
color: #fff;
}
@media screen and (min-width: 500px){
.follow{
width: 100%;
max-width: 100%;
}
.follow h1{
padding-bottom: 0;
margin-bottom: 0;
}
.follow p{
display: none;
}
.follow .space{
margin-right: 100px;
display: inline-block;
padding-bottom: 2rem;
}
.follow .space:last-child{
margin: 0;
}
}
.social{
text-align: center;
}
.icon{
font-size: 4em;
}
.welcome, .service, .price{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
color: #fff;
}
.welcome p{
color: #fff;
}
.welcome p{
font-size: 20px;
}
.shop{
background: #fff;
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
text-align: center;
color: #000;
}
.shop p{
color: #111;
}
@media screen and (min-width: 800px){
.welcome{
height: auto;
}
}
.service h1, .price h1{
text-align: left;
}
.service h2, .price h2{
color: #fff;
text-align: left;
padding-bottom: 0.5rem;
}
.service p{
color: #fff;
text-align: left;
}
.price p{
color: #fff;
text-align: left;
}
.price p{
font-size: 14px;
text-align: center;
}
table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: inherit;
width: 100%;
}
tr{
display: table-row;
vertical-align: middle;
border-color: inherit;
}
td{
vertical-align: middle;
display: table-cell;
border-bottom: 1px solid #fff;
}
.left{
width: 100%;
text-align: left;
}
.right{
width: 1%;
text-align: right;
}
.about{
margin-bottom:2rem;
width: 100%;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.about p{
text-align: left;
}
@media screen and (min-width: 500px){
.about{
width: 100%;
max-width: 100%;
}
}
.contact{
margin-bottom:2rem;
max-width: 100%;
width: auto;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.contact p{
margin-top: 1rem;
margin-bottom: 2rem;
}
.info{
margin-bottom: 2rem;
}
.info p {
font-size: 0.75em;;
margin-bottom: 1rem;
}
@media screen and (min-width: 400px){
.info p{
font-size: 15px;
}
}
.form{
margin-bottom: 2rem;
}
.form h2{
font-size: 20px;
}
form {
margin:0 auto;
width: 100%;
}
/* Style the text boxes */
input, textarea {
display: inherit;
font-family: 'Poppins', sans-serif;
font-weight: 400;
width: -webkit-fill-available;
min-width:100%;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:0.8rem;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
max-width: 10px;
min-height:10rem;
height: auto;
}
input:focus, textarea:focus {
border:1px solid #444;
}
#submit {
font-family: 'Poppins', sans-serif;
font-weight: 400;
text-align: center;
width:100%;
height:auto;
border:none;
margin-top:20px;
cursor:pointer;
background: #111;
color: #fff;
border: 2px solid #fff;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#submit:hover {
background: #efefef;
color: #111;
border: 2px solid #111;
}
.maps{
margin: 0;
height: 14rem;
}
.stroke{
height: 2px;
width: 100%;
background: #efefef;
margin-bottom: 2rem;
}
@media screen and (max-width: 400px){
.price b{
font-size: 13px;
}
}
@media screen and (min-width: 800px){
.stroke:last-child{
margin-bottom: 0;
margin-top: 2rem;
}
.wrapper{
height: 100%;
margin: 2rem 0 2rem 0;
display: flex;
}
.first-w{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #fff;
}
.second-w{
vertical-align:top;
display: inline-block;
flex: 1;
background: #fff;
}
.first-b{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #111;
}
.second-b{
vertical-align:top;
display: inline-block;
flex: 1;
background: #111;
}
.times, .welcome{
margin-bottom: 1rem;
}
.about, .service, .price{
background: none;
margin-bottom: 0;
}
.maps{
height: 100%;
}
.form{
margin-bottom: 0;
}
}<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== 0) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 122
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
history.pushState(null, null, hash);
});
} // End if
});
});
</script>
<!-- Standard Favicon -->
<link rel="icon" type="image/png" href="fav.png" />
<!-- For iPhone 4 Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="114-fav.png">
<!-- For iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="72-fav.png">
<!-- For iPhone: -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="57-fav.png">
</head>
<body>
<div class="container">
<div class="fixed">
<nav class="nav">
<input type="checkbox" id="nav" style="display: none">
<label for="nav" class="nav-btn" onclick="myFunction()">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a>MENU</a>
</div>
<div class="nav-wrapper" id="nav-wrapper">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#price">Price</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="clear" id="home"></div>
<div class="logo-bg">
<div><img src="images/logo.png" alt="Logo"></div>
</div>
<div class="wrapper">
<div class="first-b">
<div class="times">
<div><h1>Times</h1><br></div>
<div class="space">
<h2>Text & Text</h2>
<p>Text</p>
</div>
<div class="space">
<h2>Text - Text</h2>
<p>Text UUR - Text UUR</p>
</div>
</div>
</div>
<div class="second-b">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>Text</p></div>
</div>
</div>
</div>
<div class="img01"></div>
<div class="wrapper">
<div class="first-b">
<div class="about" id="about">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
</div>
</div>
</div>
<div class="second-b">
<div class="follow">
<div><h1>Text</h1><br></div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-facebook-f"></i></div>
<p>#Text</p>
</a>
</div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-instagram"></i></div>
<p>@Text</p>
</a>
</div>
</div>
</div>
</div>
<div class="img02"></div>
<div class="wrapper">
<div class="first-b">
<div class="service" id="service">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
<p> </p>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
</div>
</div>
</div>
<div class="second-b">
<div class="price" id="price">
<div><h1>Text</h1></div>
<div>
<table>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text <sup>t/m Text</sup></b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
</table>
</div>
<div> </div>
<div><i><p>Text</p><p>Text</p></i></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="first-w">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="img03"></div>
</a>
</div>
<div class="second-w">
<div class="shop" id="shop">
<div><h1>Text</h1></div>
<div>
<h2>Text</h2>
</div>
<div><i><p>... Comming Soon ...</p></i></div>
</div>
</div>
</div>
<div class="contact" id="contact">
<div><h1>CONTACT</h1></div>
<div class="wrapper">
<div class="first-b">
<div class="info">
<div><h2>Adres</h2><p>Text Text<br>Text Text</p></div>
<div><h2>Tel.Nr.</h2><p>Text</p></div>
<div><h2>Email</h2><p>Text</p></div>
</div>
<div class="stroke"></div>
<div class="form">
<div><p><i>Text</i></p></div>
<div><h2>CONTACT FORMULIER</h2></div>
<form id="ajax-contact" method="post" action="mail.php">
<input type="text" id="name" name="name" placeholder="Text" required>
<input type="email" id="email" name="email" placeholder="Text" required>
<textarea id="message" name="message" placeholder="Text" required></textarea>
<input id="submit" name="submit" type="submit" value="Verzenden">
</form>
<h1><div id="form-messages"></div></h1>
</div>
<div class="stroke"></div>
</div>
<div class="second-b">
<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=#" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-wrapper");
if (x.style.display === "block") { //Show
x.style.display = "none"; //Hide
} else {
x.style.display = "block"; //Show
}
}
</script>
</body>
</html>html css mobile nav
edited Nov 11 at 18:25
WC2
1889
asked Nov 10 at 17:33
Cross Production
106
1
Add relevant code in the question don't link to it and make the link a snippet
– SuperDJ
Nov 10 at 17:47
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
So I created a simple nav that looks good.
But I have trouble making it mobile friendly.
For the base, I used a code from CodePen.
When I start building on it I realized when the page was loaded on my phone.
And I taped (on the place where the <li> would be hidden) on the screen I would go to a section of the website.
Later I realized it was the nav that was not really hidden.
But when you open and close the nav than the hidden <li> really become hidden.
Here is the site that I build (on CodePen).
* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
font-family: 'Poppins', sans-serif;
font-weight: 400;
background: #444;
background-position: center;
background-size: cover;
}
h1{
text-transform: uppercase;
padding: 1.5rem 0 1.2rem 0;
font-weight: bolder;
font-size: 20px;
}
h2{
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
margin: 0;
}
p{
padding: 0;
margin: 0;
color: #DDD;
font-size: 15px;
}
img{
max-height: 350px;
max-width: 350px;
width: 100%;
display: block;
vertical-align: middle;
text-align: center;
}
.space{
padding-bottom: 4rem;
}
.container{
width: 80%;
margin: 0 auto 3rem auto;
color: #fff;
}
.clear{
position: inherit;
top: 0;
left: 0;
height: 8rem;
margin: 0;
}
.fixed{
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 6rem;
background: #fff;
z-index: 999;
}
nav{
width: 70%;
margin: 25px auto;
padding: 0;
}
.logo {
float: left;
padding: 0;
margin-top: 16px;
}
.logo a {
color: #000;
text-transform: uppercase;
font-weight: 900;
font-size: 18px;
letter-spacing: 0px;
text-decoration: none;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.2px;
font-weight: 600;
}
@media screen and (max-width: 864px) {
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -999;
background: #000;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding: 0 20% 0 0;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:nth-child(6) a {
transition-delay: 0.7s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease-in-out;
}
.nav-btn {
position: fixed;
right: 13%;
top: 30px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #000;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease-in-out;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.times{
margin: 2rem 0 2rem 0;
width: 100%;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.times{
max-width: 100%;
}
.times h1{
padding: 1.5rem 0 0 0;
}
.times .space{
padding-bottom: 2rem;
}
}
@media screen and (min-width: 600px){
.times .space:first-child{
display: inline-block;
padding-right: 2rem;
}
}
@media screen and (min-width: 800px){
.times .space{
padding-right: 0;
}
.times{
margin-top: 0;
height: auto;
}
}
.img01{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-01.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img02{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-02.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img03{
min-height: 300px;
height: 100%;
width: 100%;
margin-bottom: 2rem;
background: url(../images/yt.gif) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
@media screen and (min-width: 600px){
.img01, img02, img03{
height: 150px;
}
}
.video-container {
position: relative;
padding-bottom: 62.25%;
padding-top: 0px;
overflow: hidden;
margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-bg, .sec-01, .sec-02{
margin-bottom:2rem;
max-width: 350px;
width: auto;
max-height: 350px;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.img-bg{
max-width: 100%;
}
}
@media screen and (min-width: 600px){
.img-bg{
max-width: 45%;
}
}
.sec-02{
text-align: left;
padding: 0 2rem 2rem 2rem;
}
.sec-02 p{
padding-bottom: 2rem;
}
.logo-bg{
width: 100%;
padding-bottom: 1rem;
background: url(../images/logo-bg.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.logo-bg img{
display: block;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 500px){
.logo-bg{
max-width: 100%;
width: 100%;
}
}
.follow{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0;
background-color:#111;
color:#fff;
text-align: center;
}
.follow a, .follow a:link, .follow a:visited{
color: #fff;
}
@media screen and (min-width: 500px){
.follow{
width: 100%;
max-width: 100%;
}
.follow h1{
padding-bottom: 0;
margin-bottom: 0;
}
.follow p{
display: none;
}
.follow .space{
margin-right: 100px;
display: inline-block;
padding-bottom: 2rem;
}
.follow .space:last-child{
margin: 0;
}
}
.social{
text-align: center;
}
.icon{
font-size: 4em;
}
.welcome, .service, .price{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
color: #fff;
}
.welcome p{
color: #fff;
}
.welcome p{
font-size: 20px;
}
.shop{
background: #fff;
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
text-align: center;
color: #000;
}
.shop p{
color: #111;
}
@media screen and (min-width: 800px){
.welcome{
height: auto;
}
}
.service h1, .price h1{
text-align: left;
}
.service h2, .price h2{
color: #fff;
text-align: left;
padding-bottom: 0.5rem;
}
.service p{
color: #fff;
text-align: left;
}
.price p{
color: #fff;
text-align: left;
}
.price p{
font-size: 14px;
text-align: center;
}
table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: inherit;
width: 100%;
}
tr{
display: table-row;
vertical-align: middle;
border-color: inherit;
}
td{
vertical-align: middle;
display: table-cell;
border-bottom: 1px solid #fff;
}
.left{
width: 100%;
text-align: left;
}
.right{
width: 1%;
text-align: right;
}
.about{
margin-bottom:2rem;
width: 100%;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.about p{
text-align: left;
}
@media screen and (min-width: 500px){
.about{
width: 100%;
max-width: 100%;
}
}
.contact{
margin-bottom:2rem;
max-width: 100%;
width: auto;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.contact p{
margin-top: 1rem;
margin-bottom: 2rem;
}
.info{
margin-bottom: 2rem;
}
.info p {
font-size: 0.75em;;
margin-bottom: 1rem;
}
@media screen and (min-width: 400px){
.info p{
font-size: 15px;
}
}
.form{
margin-bottom: 2rem;
}
.form h2{
font-size: 20px;
}
form {
margin:0 auto;
width: 100%;
}
/* Style the text boxes */
input, textarea {
display: inherit;
font-family: 'Poppins', sans-serif;
font-weight: 400;
width: -webkit-fill-available;
min-width:100%;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:0.8rem;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
max-width: 10px;
min-height:10rem;
height: auto;
}
input:focus, textarea:focus {
border:1px solid #444;
}
#submit {
font-family: 'Poppins', sans-serif;
font-weight: 400;
text-align: center;
width:100%;
height:auto;
border:none;
margin-top:20px;
cursor:pointer;
background: #111;
color: #fff;
border: 2px solid #fff;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#submit:hover {
background: #efefef;
color: #111;
border: 2px solid #111;
}
.maps{
margin: 0;
height: 14rem;
}
.stroke{
height: 2px;
width: 100%;
background: #efefef;
margin-bottom: 2rem;
}
@media screen and (max-width: 400px){
.price b{
font-size: 13px;
}
}
@media screen and (min-width: 800px){
.stroke:last-child{
margin-bottom: 0;
margin-top: 2rem;
}
.wrapper{
height: 100%;
margin: 2rem 0 2rem 0;
display: flex;
}
.first-w{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #fff;
}
.second-w{
vertical-align:top;
display: inline-block;
flex: 1;
background: #fff;
}
.first-b{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #111;
}
.second-b{
vertical-align:top;
display: inline-block;
flex: 1;
background: #111;
}
.times, .welcome{
margin-bottom: 1rem;
}
.about, .service, .price{
background: none;
margin-bottom: 0;
}
.maps{
height: 100%;
}
.form{
margin-bottom: 0;
}
}<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== 0) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 122
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
history.pushState(null, null, hash);
});
} // End if
});
});
</script>
<!-- Standard Favicon -->
<link rel="icon" type="image/png" href="fav.png" />
<!-- For iPhone 4 Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="114-fav.png">
<!-- For iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="72-fav.png">
<!-- For iPhone: -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="57-fav.png">
</head>
<body>
<div class="container">
<div class="fixed">
<nav class="nav">
<input type="checkbox" id="nav" style="display: none">
<label for="nav" class="nav-btn" onclick="myFunction()">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a>MENU</a>
</div>
<div class="nav-wrapper" id="nav-wrapper">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#price">Price</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="clear" id="home"></div>
<div class="logo-bg">
<div><img src="images/logo.png" alt="Logo"></div>
</div>
<div class="wrapper">
<div class="first-b">
<div class="times">
<div><h1>Times</h1><br></div>
<div class="space">
<h2>Text & Text</h2>
<p>Text</p>
</div>
<div class="space">
<h2>Text - Text</h2>
<p>Text UUR - Text UUR</p>
</div>
</div>
</div>
<div class="second-b">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>Text</p></div>
</div>
</div>
</div>
<div class="img01"></div>
<div class="wrapper">
<div class="first-b">
<div class="about" id="about">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
</div>
</div>
</div>
<div class="second-b">
<div class="follow">
<div><h1>Text</h1><br></div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-facebook-f"></i></div>
<p>#Text</p>
</a>
</div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-instagram"></i></div>
<p>@Text</p>
</a>
</div>
</div>
</div>
</div>
<div class="img02"></div>
<div class="wrapper">
<div class="first-b">
<div class="service" id="service">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
<p> </p>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
</div>
</div>
</div>
<div class="second-b">
<div class="price" id="price">
<div><h1>Text</h1></div>
<div>
<table>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text <sup>t/m Text</sup></b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
</table>
</div>
<div> </div>
<div><i><p>Text</p><p>Text</p></i></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="first-w">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="img03"></div>
</a>
</div>
<div class="second-w">
<div class="shop" id="shop">
<div><h1>Text</h1></div>
<div>
<h2>Text</h2>
</div>
<div><i><p>... Comming Soon ...</p></i></div>
</div>
</div>
</div>
<div class="contact" id="contact">
<div><h1>CONTACT</h1></div>
<div class="wrapper">
<div class="first-b">
<div class="info">
<div><h2>Adres</h2><p>Text Text<br>Text Text</p></div>
<div><h2>Tel.Nr.</h2><p>Text</p></div>
<div><h2>Email</h2><p>Text</p></div>
</div>
<div class="stroke"></div>
<div class="form">
<div><p><i>Text</i></p></div>
<div><h2>CONTACT FORMULIER</h2></div>
<form id="ajax-contact" method="post" action="mail.php">
<input type="text" id="name" name="name" placeholder="Text" required>
<input type="email" id="email" name="email" placeholder="Text" required>
<textarea id="message" name="message" placeholder="Text" required></textarea>
<input id="submit" name="submit" type="submit" value="Verzenden">
</form>
<h1><div id="form-messages"></div></h1>
</div>
<div class="stroke"></div>
</div>
<div class="second-b">
<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=#" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-wrapper");
if (x.style.display === "block") { //Show
x.style.display = "none"; //Hide
} else {
x.style.display = "block"; //Show
}
}
</script>
</body>
</html>html css mobile nav
edited Nov 11 at 18:25
WC2
1889
asked Nov 10 at 17:33
Cross Production
106
So I created a simple nav that looks good.
But I have trouble making it mobile friendly.
For the base, I used a code from CodePen.
When I start building on it I realized when the page was loaded on my phone.
And I taped (on the place where the <li> would be hidden) on the screen I would go to a section of the website.
Later I realized it was the nav that was not really hidden.
But when you open and close the nav than the hidden <li> really become hidden.
Here is the site that I build (on CodePen).
* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
font-family: 'Poppins', sans-serif;
font-weight: 400;
background: #444;
background-position: center;
background-size: cover;
}
h1{
text-transform: uppercase;
padding: 1.5rem 0 1.2rem 0;
font-weight: bolder;
font-size: 20px;
}
h2{
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
margin: 0;
}
p{
padding: 0;
margin: 0;
color: #DDD;
font-size: 15px;
}
img{
max-height: 350px;
max-width: 350px;
width: 100%;
display: block;
vertical-align: middle;
text-align: center;
}
.space{
padding-bottom: 4rem;
}
.container{
width: 80%;
margin: 0 auto 3rem auto;
color: #fff;
}
.clear{
position: inherit;
top: 0;
left: 0;
height: 8rem;
margin: 0;
}
.fixed{
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 6rem;
background: #fff;
z-index: 999;
}
nav{
width: 70%;
margin: 25px auto;
padding: 0;
}
.logo {
float: left;
padding: 0;
margin-top: 16px;
}
.logo a {
color: #000;
text-transform: uppercase;
font-weight: 900;
font-size: 18px;
letter-spacing: 0px;
text-decoration: none;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.2px;
font-weight: 600;
}
@media screen and (max-width: 864px) {
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -999;
background: #000;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding: 0 20% 0 0;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:nth-child(6) a {
transition-delay: 0.7s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease-in-out;
}
.nav-btn {
position: fixed;
right: 13%;
top: 30px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #000;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease-in-out;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.times{
margin: 2rem 0 2rem 0;
width: 100%;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.times{
max-width: 100%;
}
.times h1{
padding: 1.5rem 0 0 0;
}
.times .space{
padding-bottom: 2rem;
}
}
@media screen and (min-width: 600px){
.times .space:first-child{
display: inline-block;
padding-right: 2rem;
}
}
@media screen and (min-width: 800px){
.times .space{
padding-right: 0;
}
.times{
margin-top: 0;
height: auto;
}
}
.img01{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-01.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img02{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-02.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img03{
min-height: 300px;
height: 100%;
width: 100%;
margin-bottom: 2rem;
background: url(../images/yt.gif) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
@media screen and (min-width: 600px){
.img01, img02, img03{
height: 150px;
}
}
.video-container {
position: relative;
padding-bottom: 62.25%;
padding-top: 0px;
overflow: hidden;
margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-bg, .sec-01, .sec-02{
margin-bottom:2rem;
max-width: 350px;
width: auto;
max-height: 350px;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.img-bg{
max-width: 100%;
}
}
@media screen and (min-width: 600px){
.img-bg{
max-width: 45%;
}
}
.sec-02{
text-align: left;
padding: 0 2rem 2rem 2rem;
}
.sec-02 p{
padding-bottom: 2rem;
}
.logo-bg{
width: 100%;
padding-bottom: 1rem;
background: url(../images/logo-bg.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.logo-bg img{
display: block;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 500px){
.logo-bg{
max-width: 100%;
width: 100%;
}
}
.follow{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0;
background-color:#111;
color:#fff;
text-align: center;
}
.follow a, .follow a:link, .follow a:visited{
color: #fff;
}
@media screen and (min-width: 500px){
.follow{
width: 100%;
max-width: 100%;
}
.follow h1{
padding-bottom: 0;
margin-bottom: 0;
}
.follow p{
display: none;
}
.follow .space{
margin-right: 100px;
display: inline-block;
padding-bottom: 2rem;
}
.follow .space:last-child{
margin: 0;
}
}
.social{
text-align: center;
}
.icon{
font-size: 4em;
}
.welcome, .service, .price{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
color: #fff;
}
.welcome p{
color: #fff;
}
.welcome p{
font-size: 20px;
}
.shop{
background: #fff;
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
text-align: center;
color: #000;
}
.shop p{
color: #111;
}
@media screen and (min-width: 800px){
.welcome{
height: auto;
}
}
.service h1, .price h1{
text-align: left;
}
.service h2, .price h2{
color: #fff;
text-align: left;
padding-bottom: 0.5rem;
}
.service p{
color: #fff;
text-align: left;
}
.price p{
color: #fff;
text-align: left;
}
.price p{
font-size: 14px;
text-align: center;
}
table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: inherit;
width: 100%;
}
tr{
display: table-row;
vertical-align: middle;
border-color: inherit;
}
td{
vertical-align: middle;
display: table-cell;
border-bottom: 1px solid #fff;
}
.left{
width: 100%;
text-align: left;
}
.right{
width: 1%;
text-align: right;
}
.about{
margin-bottom:2rem;
width: 100%;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.about p{
text-align: left;
}
@media screen and (min-width: 500px){
.about{
width: 100%;
max-width: 100%;
}
}
.contact{
margin-bottom:2rem;
max-width: 100%;
width: auto;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.contact p{
margin-top: 1rem;
margin-bottom: 2rem;
}
.info{
margin-bottom: 2rem;
}
.info p {
font-size: 0.75em;;
margin-bottom: 1rem;
}
@media screen and (min-width: 400px){
.info p{
font-size: 15px;
}
}
.form{
margin-bottom: 2rem;
}
.form h2{
font-size: 20px;
}
form {
margin:0 auto;
width: 100%;
}
/* Style the text boxes */
input, textarea {
display: inherit;
font-family: 'Poppins', sans-serif;
font-weight: 400;
width: -webkit-fill-available;
min-width:100%;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:0.8rem;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
max-width: 10px;
min-height:10rem;
height: auto;
}
input:focus, textarea:focus {
border:1px solid #444;
}
#submit {
font-family: 'Poppins', sans-serif;
font-weight: 400;
text-align: center;
width:100%;
height:auto;
border:none;
margin-top:20px;
cursor:pointer;
background: #111;
color: #fff;
border: 2px solid #fff;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#submit:hover {
background: #efefef;
color: #111;
border: 2px solid #111;
}
.maps{
margin: 0;
height: 14rem;
}
.stroke{
height: 2px;
width: 100%;
background: #efefef;
margin-bottom: 2rem;
}
@media screen and (max-width: 400px){
.price b{
font-size: 13px;
}
}
@media screen and (min-width: 800px){
.stroke:last-child{
margin-bottom: 0;
margin-top: 2rem;
}
.wrapper{
height: 100%;
margin: 2rem 0 2rem 0;
display: flex;
}
.first-w{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #fff;
}
.second-w{
vertical-align:top;
display: inline-block;
flex: 1;
background: #fff;
}
.first-b{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #111;
}
.second-b{
vertical-align:top;
display: inline-block;
flex: 1;
background: #111;
}
.times, .welcome{
margin-bottom: 1rem;
}
.about, .service, .price{
background: none;
margin-bottom: 0;
}
.maps{
height: 100%;
}
.form{
margin-bottom: 0;
}
}<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== 0) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 122
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
history.pushState(null, null, hash);
});
} // End if
});
});
</script>
<!-- Standard Favicon -->
<link rel="icon" type="image/png" href="fav.png" />
<!-- For iPhone 4 Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="114-fav.png">
<!-- For iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="72-fav.png">
<!-- For iPhone: -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="57-fav.png">
</head>
<body>
<div class="container">
<div class="fixed">
<nav class="nav">
<input type="checkbox" id="nav" style="display: none">
<label for="nav" class="nav-btn" onclick="myFunction()">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a>MENU</a>
</div>
<div class="nav-wrapper" id="nav-wrapper">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#price">Price</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="clear" id="home"></div>
<div class="logo-bg">
<div><img src="images/logo.png" alt="Logo"></div>
</div>
<div class="wrapper">
<div class="first-b">
<div class="times">
<div><h1>Times</h1><br></div>
<div class="space">
<h2>Text & Text</h2>
<p>Text</p>
</div>
<div class="space">
<h2>Text - Text</h2>
<p>Text UUR - Text UUR</p>
</div>
</div>
</div>
<div class="second-b">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>Text</p></div>
</div>
</div>
</div>
<div class="img01"></div>
<div class="wrapper">
<div class="first-b">
<div class="about" id="about">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
</div>
</div>
</div>
<div class="second-b">
<div class="follow">
<div><h1>Text</h1><br></div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-facebook-f"></i></div>
<p>#Text</p>
</a>
</div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-instagram"></i></div>
<p>@Text</p>
</a>
</div>
</div>
</div>
</div>
<div class="img02"></div>
<div class="wrapper">
<div class="first-b">
<div class="service" id="service">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
<p> </p>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
</div>
</div>
</div>
<div class="second-b">
<div class="price" id="price">
<div><h1>Text</h1></div>
<div>
<table>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text <sup>t/m Text</sup></b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
</table>
</div>
<div> </div>
<div><i><p>Text</p><p>Text</p></i></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="first-w">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="img03"></div>
</a>
</div>
<div class="second-w">
<div class="shop" id="shop">
<div><h1>Text</h1></div>
<div>
<h2>Text</h2>
</div>
<div><i><p>... Comming Soon ...</p></i></div>
</div>
</div>
</div>
<div class="contact" id="contact">
<div><h1>CONTACT</h1></div>
<div class="wrapper">
<div class="first-b">
<div class="info">
<div><h2>Adres</h2><p>Text Text<br>Text Text</p></div>
<div><h2>Tel.Nr.</h2><p>Text</p></div>
<div><h2>Email</h2><p>Text</p></div>
</div>
<div class="stroke"></div>
<div class="form">
<div><p><i>Text</i></p></div>
<div><h2>CONTACT FORMULIER</h2></div>
<form id="ajax-contact" method="post" action="mail.php">
<input type="text" id="name" name="name" placeholder="Text" required>
<input type="email" id="email" name="email" placeholder="Text" required>
<textarea id="message" name="message" placeholder="Text" required></textarea>
<input id="submit" name="submit" type="submit" value="Verzenden">
</form>
<h1><div id="form-messages"></div></h1>
</div>
<div class="stroke"></div>
</div>
<div class="second-b">
<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=#" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-wrapper");
if (x.style.display === "block") { //Show
x.style.display = "none"; //Hide
} else {
x.style.display = "block"; //Show
}
}
</script>
</body>
</html>* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
font-family: 'Poppins', sans-serif;
font-weight: 400;
background: #444;
background-position: center;
background-size: cover;
}
h1{
text-transform: uppercase;
padding: 1.5rem 0 1.2rem 0;
font-weight: bolder;
font-size: 20px;
}
h2{
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
margin: 0;
}
p{
padding: 0;
margin: 0;
color: #DDD;
font-size: 15px;
}
img{
max-height: 350px;
max-width: 350px;
width: 100%;
display: block;
vertical-align: middle;
text-align: center;
}
.space{
padding-bottom: 4rem;
}
.container{
width: 80%;
margin: 0 auto 3rem auto;
color: #fff;
}
.clear{
position: inherit;
top: 0;
left: 0;
height: 8rem;
margin: 0;
}
.fixed{
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 6rem;
background: #fff;
z-index: 999;
}
nav{
width: 70%;
margin: 25px auto;
padding: 0;
}
.logo {
float: left;
padding: 0;
margin-top: 16px;
}
.logo a {
color: #000;
text-transform: uppercase;
font-weight: 900;
font-size: 18px;
letter-spacing: 0px;
text-decoration: none;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.2px;
font-weight: 600;
}
@media screen and (max-width: 864px) {
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -999;
background: #000;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding: 0 20% 0 0;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:nth-child(6) a {
transition-delay: 0.7s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease-in-out;
}
.nav-btn {
position: fixed;
right: 13%;
top: 30px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #000;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease-in-out;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.times{
margin: 2rem 0 2rem 0;
width: 100%;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.times{
max-width: 100%;
}
.times h1{
padding: 1.5rem 0 0 0;
}
.times .space{
padding-bottom: 2rem;
}
}
@media screen and (min-width: 600px){
.times .space:first-child{
display: inline-block;
padding-right: 2rem;
}
}
@media screen and (min-width: 800px){
.times .space{
padding-right: 0;
}
.times{
margin-top: 0;
height: auto;
}
}
.img01{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-01.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img02{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-02.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img03{
min-height: 300px;
height: 100%;
width: 100%;
margin-bottom: 2rem;
background: url(../images/yt.gif) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
@media screen and (min-width: 600px){
.img01, img02, img03{
height: 150px;
}
}
.video-container {
position: relative;
padding-bottom: 62.25%;
padding-top: 0px;
overflow: hidden;
margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-bg, .sec-01, .sec-02{
margin-bottom:2rem;
max-width: 350px;
width: auto;
max-height: 350px;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.img-bg{
max-width: 100%;
}
}
@media screen and (min-width: 600px){
.img-bg{
max-width: 45%;
}
}
.sec-02{
text-align: left;
padding: 0 2rem 2rem 2rem;
}
.sec-02 p{
padding-bottom: 2rem;
}
.logo-bg{
width: 100%;
padding-bottom: 1rem;
background: url(../images/logo-bg.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.logo-bg img{
display: block;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 500px){
.logo-bg{
max-width: 100%;
width: 100%;
}
}
.follow{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0;
background-color:#111;
color:#fff;
text-align: center;
}
.follow a, .follow a:link, .follow a:visited{
color: #fff;
}
@media screen and (min-width: 500px){
.follow{
width: 100%;
max-width: 100%;
}
.follow h1{
padding-bottom: 0;
margin-bottom: 0;
}
.follow p{
display: none;
}
.follow .space{
margin-right: 100px;
display: inline-block;
padding-bottom: 2rem;
}
.follow .space:last-child{
margin: 0;
}
}
.social{
text-align: center;
}
.icon{
font-size: 4em;
}
.welcome, .service, .price{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
color: #fff;
}
.welcome p{
color: #fff;
}
.welcome p{
font-size: 20px;
}
.shop{
background: #fff;
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
text-align: center;
color: #000;
}
.shop p{
color: #111;
}
@media screen and (min-width: 800px){
.welcome{
height: auto;
}
}
.service h1, .price h1{
text-align: left;
}
.service h2, .price h2{
color: #fff;
text-align: left;
padding-bottom: 0.5rem;
}
.service p{
color: #fff;
text-align: left;
}
.price p{
color: #fff;
text-align: left;
}
.price p{
font-size: 14px;
text-align: center;
}
table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: inherit;
width: 100%;
}
tr{
display: table-row;
vertical-align: middle;
border-color: inherit;
}
td{
vertical-align: middle;
display: table-cell;
border-bottom: 1px solid #fff;
}
.left{
width: 100%;
text-align: left;
}
.right{
width: 1%;
text-align: right;
}
.about{
margin-bottom:2rem;
width: 100%;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.about p{
text-align: left;
}
@media screen and (min-width: 500px){
.about{
width: 100%;
max-width: 100%;
}
}
.contact{
margin-bottom:2rem;
max-width: 100%;
width: auto;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.contact p{
margin-top: 1rem;
margin-bottom: 2rem;
}
.info{
margin-bottom: 2rem;
}
.info p {
font-size: 0.75em;;
margin-bottom: 1rem;
}
@media screen and (min-width: 400px){
.info p{
font-size: 15px;
}
}
.form{
margin-bottom: 2rem;
}
.form h2{
font-size: 20px;
}
form {
margin:0 auto;
width: 100%;
}
/* Style the text boxes */
input, textarea {
display: inherit;
font-family: 'Poppins', sans-serif;
font-weight: 400;
width: -webkit-fill-available;
min-width:100%;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:0.8rem;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
max-width: 10px;
min-height:10rem;
height: auto;
}
input:focus, textarea:focus {
border:1px solid #444;
}
#submit {
font-family: 'Poppins', sans-serif;
font-weight: 400;
text-align: center;
width:100%;
height:auto;
border:none;
margin-top:20px;
cursor:pointer;
background: #111;
color: #fff;
border: 2px solid #fff;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#submit:hover {
background: #efefef;
color: #111;
border: 2px solid #111;
}
.maps{
margin: 0;
height: 14rem;
}
.stroke{
height: 2px;
width: 100%;
background: #efefef;
margin-bottom: 2rem;
}
@media screen and (max-width: 400px){
.price b{
font-size: 13px;
}
}
@media screen and (min-width: 800px){
.stroke:last-child{
margin-bottom: 0;
margin-top: 2rem;
}
.wrapper{
height: 100%;
margin: 2rem 0 2rem 0;
display: flex;
}
.first-w{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #fff;
}
.second-w{
vertical-align:top;
display: inline-block;
flex: 1;
background: #fff;
}
.first-b{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #111;
}
.second-b{
vertical-align:top;
display: inline-block;
flex: 1;
background: #111;
}
.times, .welcome{
margin-bottom: 1rem;
}
.about, .service, .price{
background: none;
margin-bottom: 0;
}
.maps{
height: 100%;
}
.form{
margin-bottom: 0;
}
}<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== 0) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 122
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
history.pushState(null, null, hash);
});
} // End if
});
});
</script>
<!-- Standard Favicon -->
<link rel="icon" type="image/png" href="fav.png" />
<!-- For iPhone 4 Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="114-fav.png">
<!-- For iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="72-fav.png">
<!-- For iPhone: -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="57-fav.png">
</head>
<body>
<div class="container">
<div class="fixed">
<nav class="nav">
<input type="checkbox" id="nav" style="display: none">
<label for="nav" class="nav-btn" onclick="myFunction()">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a>MENU</a>
</div>
<div class="nav-wrapper" id="nav-wrapper">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#price">Price</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="clear" id="home"></div>
<div class="logo-bg">
<div><img src="images/logo.png" alt="Logo"></div>
</div>
<div class="wrapper">
<div class="first-b">
<div class="times">
<div><h1>Times</h1><br></div>
<div class="space">
<h2>Text & Text</h2>
<p>Text</p>
</div>
<div class="space">
<h2>Text - Text</h2>
<p>Text UUR - Text UUR</p>
</div>
</div>
</div>
<div class="second-b">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>Text</p></div>
</div>
</div>
</div>
<div class="img01"></div>
<div class="wrapper">
<div class="first-b">
<div class="about" id="about">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
</div>
</div>
</div>
<div class="second-b">
<div class="follow">
<div><h1>Text</h1><br></div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-facebook-f"></i></div>
<p>#Text</p>
</a>
</div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-instagram"></i></div>
<p>@Text</p>
</a>
</div>
</div>
</div>
</div>
<div class="img02"></div>
<div class="wrapper">
<div class="first-b">
<div class="service" id="service">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
<p> </p>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
</div>
</div>
</div>
<div class="second-b">
<div class="price" id="price">
<div><h1>Text</h1></div>
<div>
<table>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text <sup>t/m Text</sup></b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
</table>
</div>
<div> </div>
<div><i><p>Text</p><p>Text</p></i></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="first-w">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="img03"></div>
</a>
</div>
<div class="second-w">
<div class="shop" id="shop">
<div><h1>Text</h1></div>
<div>
<h2>Text</h2>
</div>
<div><i><p>... Comming Soon ...</p></i></div>
</div>
</div>
</div>
<div class="contact" id="contact">
<div><h1>CONTACT</h1></div>
<div class="wrapper">
<div class="first-b">
<div class="info">
<div><h2>Adres</h2><p>Text Text<br>Text Text</p></div>
<div><h2>Tel.Nr.</h2><p>Text</p></div>
<div><h2>Email</h2><p>Text</p></div>
</div>
<div class="stroke"></div>
<div class="form">
<div><p><i>Text</i></p></div>
<div><h2>CONTACT FORMULIER</h2></div>
<form id="ajax-contact" method="post" action="mail.php">
<input type="text" id="name" name="name" placeholder="Text" required>
<input type="email" id="email" name="email" placeholder="Text" required>
<textarea id="message" name="message" placeholder="Text" required></textarea>
<input id="submit" name="submit" type="submit" value="Verzenden">
</form>
<h1><div id="form-messages"></div></h1>
</div>
<div class="stroke"></div>
</div>
<div class="second-b">
<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=#" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-wrapper");
if (x.style.display === "block") { //Show
x.style.display = "none"; //Hide
} else {
x.style.display = "block"; //Show
}
}
</script>
</body>
</html>* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
font-family: 'Poppins', sans-serif;
font-weight: 400;
background: #444;
background-position: center;
background-size: cover;
}
h1{
text-transform: uppercase;
padding: 1.5rem 0 1.2rem 0;
font-weight: bolder;
font-size: 20px;
}
h2{
text-transform: uppercase;
font-weight: bold;
font-size: 15px;
margin: 0;
}
p{
padding: 0;
margin: 0;
color: #DDD;
font-size: 15px;
}
img{
max-height: 350px;
max-width: 350px;
width: 100%;
display: block;
vertical-align: middle;
text-align: center;
}
.space{
padding-bottom: 4rem;
}
.container{
width: 80%;
margin: 0 auto 3rem auto;
color: #fff;
}
.clear{
position: inherit;
top: 0;
left: 0;
height: 8rem;
margin: 0;
}
.fixed{
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 6rem;
background: #fff;
z-index: 999;
}
nav{
width: 70%;
margin: 25px auto;
padding: 0;
}
.logo {
float: left;
padding: 0;
margin-top: 16px;
}
.logo a {
color: #000;
text-transform: uppercase;
font-weight: 900;
font-size: 18px;
letter-spacing: 0px;
text-decoration: none;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
display: inline-block;
outline: none;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1.2px;
font-weight: 600;
}
@media screen and (max-width: 864px) {
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -999;
background: #000;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding: 0 20% 0 0;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:nth-child(6) a {
transition-delay: 0.7s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease-in-out;
}
.nav-btn {
position: fixed;
right: 13%;
top: 30px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #000;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease-in-out;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.times{
margin: 2rem 0 2rem 0;
width: 100%;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.times{
max-width: 100%;
}
.times h1{
padding: 1.5rem 0 0 0;
}
.times .space{
padding-bottom: 2rem;
}
}
@media screen and (min-width: 600px){
.times .space:first-child{
display: inline-block;
padding-right: 2rem;
}
}
@media screen and (min-width: 800px){
.times .space{
padding-right: 0;
}
.times{
margin-top: 0;
height: auto;
}
}
.img01{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-01.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img02{
height: 250px;
width: 100%;
margin-bottom: 2rem;
background: url(../images/barber-02.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.img03{
min-height: 300px;
height: 100%;
width: 100%;
margin-bottom: 2rem;
background: url(../images/yt.gif) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
@media screen and (min-width: 600px){
.img01, img02, img03{
height: 150px;
}
}
.video-container {
position: relative;
padding-bottom: 62.25%;
padding-top: 0px;
overflow: hidden;
margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-bg, .sec-01, .sec-02{
margin-bottom:2rem;
max-width: 350px;
width: auto;
max-height: 350px;
height: auto;
padding: 0;
background:#111;
color:#fff;
text-align: center;
}
@media screen and (min-width: 500px){
.img-bg{
max-width: 100%;
}
}
@media screen and (min-width: 600px){
.img-bg{
max-width: 45%;
}
}
.sec-02{
text-align: left;
padding: 0 2rem 2rem 2rem;
}
.sec-02 p{
padding-bottom: 2rem;
}
.logo-bg{
width: 100%;
padding-bottom: 1rem;
background: url(../images/logo-bg.png) center center no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.logo-bg img{
display: block;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 500px){
.logo-bg{
max-width: 100%;
width: 100%;
}
}
.follow{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0;
background-color:#111;
color:#fff;
text-align: center;
}
.follow a, .follow a:link, .follow a:visited{
color: #fff;
}
@media screen and (min-width: 500px){
.follow{
width: 100%;
max-width: 100%;
}
.follow h1{
padding-bottom: 0;
margin-bottom: 0;
}
.follow p{
display: none;
}
.follow .space{
margin-right: 100px;
display: inline-block;
padding-bottom: 2rem;
}
.follow .space:last-child{
margin: 0;
}
}
.social{
text-align: center;
}
.icon{
font-size: 4em;
}
.welcome, .service, .price{
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
color: #fff;
}
.welcome p{
color: #fff;
}
.welcome p{
font-size: 20px;
}
.shop{
background: #fff;
margin-bottom:2rem;
width: 100%;
height: auto;
padding: 0 2rem 2rem 2rem;
text-align: center;
color: #000;
}
.shop p{
color: #111;
}
@media screen and (min-width: 800px){
.welcome{
height: auto;
}
}
.service h1, .price h1{
text-align: left;
}
.service h2, .price h2{
color: #fff;
text-align: left;
padding-bottom: 0.5rem;
}
.service p{
color: #fff;
text-align: left;
}
.price p{
color: #fff;
text-align: left;
}
.price p{
font-size: 14px;
text-align: center;
}
table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: inherit;
width: 100%;
}
tr{
display: table-row;
vertical-align: middle;
border-color: inherit;
}
td{
vertical-align: middle;
display: table-cell;
border-bottom: 1px solid #fff;
}
.left{
width: 100%;
text-align: left;
}
.right{
width: 1%;
text-align: right;
}
.about{
margin-bottom:2rem;
width: 100%;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.about p{
text-align: left;
}
@media screen and (min-width: 500px){
.about{
width: 100%;
max-width: 100%;
}
}
.contact{
margin-bottom:2rem;
max-width: 100%;
width: auto;
height: 100%;
padding: 0 2rem 2rem 2rem;
background-color:#111;
text-align: center;
}
.contact p{
margin-top: 1rem;
margin-bottom: 2rem;
}
.info{
margin-bottom: 2rem;
}
.info p {
font-size: 0.75em;;
margin-bottom: 1rem;
}
@media screen and (min-width: 400px){
.info p{
font-size: 15px;
}
}
.form{
margin-bottom: 2rem;
}
.form h2{
font-size: 20px;
}
form {
margin:0 auto;
width: 100%;
}
/* Style the text boxes */
input, textarea {
display: inherit;
font-family: 'Poppins', sans-serif;
font-weight: 400;
width: -webkit-fill-available;
min-width:100%;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:0.8rem;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
max-width: 10px;
min-height:10rem;
height: auto;
}
input:focus, textarea:focus {
border:1px solid #444;
}
#submit {
font-family: 'Poppins', sans-serif;
font-weight: 400;
text-align: center;
width:100%;
height:auto;
border:none;
margin-top:20px;
cursor:pointer;
background: #111;
color: #fff;
border: 2px solid #fff;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#submit:hover {
background: #efefef;
color: #111;
border: 2px solid #111;
}
.maps{
margin: 0;
height: 14rem;
}
.stroke{
height: 2px;
width: 100%;
background: #efefef;
margin-bottom: 2rem;
}
@media screen and (max-width: 400px){
.price b{
font-size: 13px;
}
}
@media screen and (min-width: 800px){
.stroke:last-child{
margin-bottom: 0;
margin-top: 2rem;
}
.wrapper{
height: 100%;
margin: 2rem 0 2rem 0;
display: flex;
}
.first-w{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #fff;
}
.second-w{
vertical-align:top;
display: inline-block;
flex: 1;
background: #fff;
}
.first-b{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
background: #111;
}
.second-b{
vertical-align:top;
display: inline-block;
flex: 1;
background: #111;
}
.times, .welcome{
margin-bottom: 1rem;
}
.about, .service, .price{
background: none;
margin-bottom: 0;
}
.maps{
height: 100%;
}
.form{
margin-bottom: 0;
}
}<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== 0) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 122
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
history.pushState(null, null, hash);
});
} // End if
});
});
</script>
<!-- Standard Favicon -->
<link rel="icon" type="image/png" href="fav.png" />
<!-- For iPhone 4 Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="114-fav.png">
<!-- For iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="72-fav.png">
<!-- For iPhone: -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="57-fav.png">
</head>
<body>
<div class="container">
<div class="fixed">
<nav class="nav">
<input type="checkbox" id="nav" style="display: none">
<label for="nav" class="nav-btn" onclick="myFunction()">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a>MENU</a>
</div>
<div class="nav-wrapper" id="nav-wrapper">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#price">Price</a></li>
<li><a href="#shop">Shop</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="clear" id="home"></div>
<div class="logo-bg">
<div><img src="images/logo.png" alt="Logo"></div>
</div>
<div class="wrapper">
<div class="first-b">
<div class="times">
<div><h1>Times</h1><br></div>
<div class="space">
<h2>Text & Text</h2>
<p>Text</p>
</div>
<div class="space">
<h2>Text - Text</h2>
<p>Text UUR - Text UUR</p>
</div>
</div>
</div>
<div class="second-b">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>Text</p></div>
</div>
</div>
</div>
<div class="img01"></div>
<div class="wrapper">
<div class="first-b">
<div class="about" id="about">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
</div>
</div>
</div>
<div class="second-b">
<div class="follow">
<div><h1>Text</h1><br></div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-facebook-f"></i></div>
<p>#Text</p>
</a>
</div>
<div class="space">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="icon"><i class="fab fa-instagram"></i></div>
<p>@Text</p>
</a>
</div>
</div>
</div>
</div>
<div class="img02"></div>
<div class="wrapper">
<div class="first-b">
<div class="service" id="service">
<div><h1>Text</h1></div>
<div>
<p>Text</p>
<p> </p>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
<h2><i class="fas fa-star"></i> - Text</h2>
</div>
</div>
</div>
<div class="second-b">
<div class="price" id="price">
<div><h1>Text</h1></div>
<div>
<table>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text & Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text <sup>t/m Text</sup></b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
<tr>
<td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
<td class="right">€</td>
<td class="right">99</td>
</tr>
</table>
</div>
<div> </div>
<div><i><p>Text</p><p>Text</p></i></div>
</div>
</div>
</div>
<div class="wrapper">
<div class="first-w">
<a href="#" onclick="window.open(this.href,'_blank');return false;">
<div class="img03"></div>
</a>
</div>
<div class="second-w">
<div class="shop" id="shop">
<div><h1>Text</h1></div>
<div>
<h2>Text</h2>
</div>
<div><i><p>... Comming Soon ...</p></i></div>
</div>
</div>
</div>
<div class="contact" id="contact">
<div><h1>CONTACT</h1></div>
<div class="wrapper">
<div class="first-b">
<div class="info">
<div><h2>Adres</h2><p>Text Text<br>Text Text</p></div>
<div><h2>Tel.Nr.</h2><p>Text</p></div>
<div><h2>Email</h2><p>Text</p></div>
</div>
<div class="stroke"></div>
<div class="form">
<div><p><i>Text</i></p></div>
<div><h2>CONTACT FORMULIER</h2></div>
<form id="ajax-contact" method="post" action="mail.php">
<input type="text" id="name" name="name" placeholder="Text" required>
<input type="email" id="email" name="email" placeholder="Text" required>
<textarea id="message" name="message" placeholder="Text" required></textarea>
<input id="submit" name="submit" type="submit" value="Verzenden">
</form>
<h1><div id="form-messages"></div></h1>
</div>
<div class="stroke"></div>
</div>
<div class="second-b">
<div class="maps">
<iframe src="https://www.google.com/maps/embed?pb=#" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-wrapper");
if (x.style.display === "block") { //Show
x.style.display = "none"; //Hide
} else {
x.style.display = "block"; //Show
}
}
</script>
</body>
</html>html css mobile nav
html css mobile nav
edited Nov 11 at 18:25
WC2
1889
asked Nov 10 at 17:33
Cross Production
106
edited Nov 11 at 18:25
WC2
1889
asked Nov 10 at 17:33
Cross Production
106
edited Nov 11 at 18:25
WC2
1889
edited Nov 11 at 18:25
WC2
1889
edited Nov 11 at 18:25
WC2
1889
1889
asked Nov 10 at 17:33
Cross Production
106
asked Nov 10 at 17:33
Cross Production
106
asked Nov 10 at 17:33
Cross Production
106
106
1
Add relevant code in the question don't link to it and make the link a snippet
– SuperDJ
Nov 10 at 17:47
add a comment |
1
Add relevant code in the question don't link to it and make the link a snippet
– SuperDJ
Nov 10 at 17:47
1
1
Add relevant code in the question don't link to it and make the link a snippet
– SuperDJ
Nov 10 at 17:47
Add relevant code in the question don't link to it and make the link a snippet
– SuperDJ
Nov 10 at 17:47
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241619%2fhow-to-fix-hidden-navbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Add relevant code in the question don't link to it and make the link a snippet
– SuperDJ
Nov 10 at 17:47