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
1869
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
1869
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
1869
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
1869
asked Nov 10 at 17:33
Cross Production
106
edited Nov 11 at 18:25
WC2
1869
asked Nov 10 at 17:33
Cross Production
106
edited Nov 11 at 18:25
WC2
1869
edited Nov 11 at 18:25
WC2
1869
edited Nov 11 at 18:25
WC2
1869
1869
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