Here is the code i used. On pressing the navbar menu the content should move right with a delay of 0.7s same as the sidebar opens with a delay of 0.7s but it is not working.
Kindly review the code and suggest something.
is it because of some media query I am using or anything else.?
Kindly review the code and suggest something.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.header{
width: 100%;
height: 70px;
background-color: #2f3640;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
}
.header img{
width: 60px;
height: 60px;
margin-right: 15px;
}
.header h1 {
line-height: 70px;
color: #fff;
}
.Content{
margin-top: 80px;
width: 100;
padding: 20px;
float: right;
transition: all 0.7s;
}
.Content img{
width: 100%;
max-width: 700px;
display: block;
margin: auto;
}
.Content p{
text-align: justify;
}
.Sidebar{
width: 20%;
height: 100%;
position: fixed;
top: 70px;
background-color: #353b48;
left: -100%;
transition: .7s;
}
.Sidebar ul{
list-style: none;
}
.Sidebar ul li {
border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a{
display: block;
text-decoration none;
color: #fff;
font-size: 20px;
padding: 15px 25px;
transition: .4s;
}
span{
margin-left: 15px;
}
.Sidebar ul li a:hover {
border-left: 10px solid white;
}
.social{
margin-top: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 30px;
border-bottom: 2px solid rgba(255, 255, 255, .1);
border-top: 2px solid rgba(255, 255, 255, .1);
padding: 15px 25px;
}
i{
font-size: 30px;
color: #fff;
transition: .2s;
}
i:hover{
transform: scale(1.2);
color: green;
}
.show-btn, .hide-btn {
font-size: 35px;
color: #fff;
position: fixed;
top: 15px;
left: 50px;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -10;
}
.hide-btn{
opacity: 0;
}
#chk:checked ~ .Sidebar{
left: 0;
}
#chk:checked ~ .show-btn{
opacity: 0;
}
#chk:checked ~ .hide-btn{
opacity: 1;
}
#chk:checked ~ .Content{
width: 80%;
float: right;
transition: all 0.7s;
}
#media(max-width: 768px){
.Sidebar{
width: 100%;
text-align: center;
}
.Sidebar ul li a:hover {
border-left: 30px solid white;
}
.header h1{
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-NavBar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="header">
<img src="../images/fullstackLogo.png" alt="logo-img">
<h1>FullStack</h1>
</div>
<input type="checkbox" name="" id="chk">
<label for="chk" class="show-btn">
<i class="fa fa-bars"></i>
</label>
<label for="chk" class="hide-btn">
<i class="fa fa-times"></i>
</label>
<div class="Sidebar">
<ul>
<li><i class="fa fa-home"><span>Home</span></i></li>
<li><i class="fa fa-user"><span>About</span></i></li>
<li><i class="fa fa-tasks"><span>Services</span></i></li>
<li><i class="fa fa-rss"><span>Blog</span></i></li>
<li><i class="fa fa-id-card"><span>Contact</span></i></li>
</ul>
<div class="social">
<i class="fa fa-facebook-square"></i>
<i class="fa fa-youtube-square"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
<div class="Content">
<img src="../images/laptop1.jpg" alt="body-img">
<p>
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
I corrected your code.
This CSS transitions is not working perfectly Because of you are using different CSS property of sidebar and content part to show this transitions.
Currently you are manipulating CSS property of sidebar is left -100% to 0 cause this issue.
Please manage CSS properties width:0% to 20% of sidebar which transact over a same period of time as content part.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.header {
width: 100%;
height: 70px;
background-color: #2f3640;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
}
.header img {
width: 60px;
height: 60px;
margin-right: 15px;
}
.header h1 {
line-height: 70px;
color: #fff;
}
.Content {
margin-top: 80px;
width: 100%;
padding: 20px;
float: right;
transition: all 0.7s;
}
.Content img {
width: 100%;
max-width: 700px;
display: block;
margin: auto;
}
.Content p {
text-align: justify;
}
.Sidebar {
width:0%;
height: 100%;
position: fixed;
top: 70px;
background-color: #353b48;
left:0;
transition: all 0.7s;
overflow: hidden;
}
.Sidebar ul {
list-style: none;
}
.Sidebar ul li {
border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a {
display: block;
text-decoration none;
color: #fff;
font-size: 20px;
padding: 15px 25px;
transition: .4s;
}
span {
margin-left: 15px;
}
.Sidebar ul li a:hover {
border-left: 10px solid white;
}
.social {
margin-top: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 30px;
border-bottom: 2px solid rgba(255, 255, 255, .1);
border-top: 2px solid rgba(255, 255, 255, .1);
padding: 15px 25px;
}
i {
font-size: 30px;
color: #fff;
transition: .2s;
}
i:hover {
transform: scale(1.2);
color: green;
}
.show-btn, .hide-btn {
font-size: 35px;
color: #fff;
position: fixed;
top: 15px;
left: 50px;
}
#chk {
position: absolute;
visibility: hidden;
z-index: -10;
}
.hide-btn {
opacity: 0;
}
#chk:checked ~ .Sidebar {
width: 20%;
}
#chk:checked ~ .show-btn {
opacity: 0;
}
#chk:checked ~ .hide-btn {
opacity: 1;
}
#chk:checked ~ .Content {
width: 80%;
}
#media(max-width: 768px) {
.Sidebar {
width: 100%;
text-align: center;
}
.Sidebar ul li a:hover {
border-left: 30px solid white;
}
.header h1 {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side-NavBar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="header"> <img src="../images/fullstackLogo.png" alt="logo-img">
<h1>FullStack</h1>
</div>
<input type="checkbox" name="" id="chk">
<label for="chk" class="show-btn"> <i class="fa fa-bars"></i> </label>
<label for="chk" class="hide-btn"> <i class="fa fa-times"></i> </label>
<div class="Sidebar">
<ul>
<li><i class="fa fa-home"><span>Home</span></i>
<About/li>
<li><i class="fa fa-user"><span>About</span></i></li>
<li><i class="fa fa-tasks"><span>Services</span></i></li>
<li><i class="fa fa-rss"><span>Blog</span></i></li>
<li><i class="fa fa-id-card"><span>Contact</span></i></li>
</ul>
<div class="social"> <i class="fa fa-facebook-square"></i> <i class="fa fa-youtube-square"></i> <i class="fa fa-instagram"></i> </div>
</div>
<div class="Content"> <img src="../images/laptop1.jpg" alt="body-img">
<p> Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</body>
</html>
Please click on 'full page' to see correct output
Related
I'm sure this is relatively simple problem but after some fiddling I'm not finding much luck, will fix one thing then another problem arises. As you can see below (this is on desktop, mobile works perfect) the text boxes are way too big, leaving loads of white space below texts, some images are a good size, some are too big, the top one looks the best. The idea being the image spans across one side then the text box is the same height next to it.
Here is a picture of the mobile for reference
I wont link all the HTML and CSS, just the relevant stuff. Any advice is welcome and appreciated.
<html lang="en" dir="ltr">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;600&family=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<meta charset="utf-8" >
<meta name="description" content="Jordan Squres, mixed martial arts trainer, working out of Oxfordshire">
<meta name="keywords" content="MMA, martial arts, personal trainer, self defence, exercise">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="autor" content="Descisive Development">
<link rel="stylesheet" href="styles.css">
<title>Jordan Squires, Home</title>
</head>
<body >
<nav class="navbar">
Jordan Squires
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="navitem"> Home</li>
<li class="navitem"> About</li>
<li class="navitem"> Clients</li>
<li class="navitem"> Blog</li>
<li class="navitem"> Contact</li>
</ul>
</div>
</nav>
<section class="home-hero">
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio1.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container" id="even">
<div class="img-hero">
<img src="images/portfolio2.jpg" alt="">
</div>
<div class="info-hero">
<h1>Shotokan Karate</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio3.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jeet Kune Do</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container"id="even">
<div class="img-hero">
<img src="images/portfolio4.jpg" alt="">
</div>
<div class="info-hero">
<h1>Brazilian Jiu Jitsu</h1>
<h2>Purple Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio5.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
</body>
</html>
and the css
box-sizing: inherit;
margin: 0 auto;
padding: 0;
}
html{
font-size: 10px;
max-width: 1300px;
box-sizing: border-box;
}
body{
background: var(--white);
}
a{
color: var(--main-txt);
text-decoration: none;
}
:root{
--white: #F1FAEE;
--outline-color: #000000;
--bg-color: #1D3557;
--main-txt: #457B9D;
--alt-txt: #A8DADC;
--red: #E63946;
--ff: 'Montserrat', sans-serif;
--ff2: 'Poppins', sans-serif;
--fw-l: 300;
--fw-n: 400;
--fw-m: 600;
--fw-b: 700;
--fs-1: ;
--fs-2: ;
--fs-3: ;
--fs-p: ;
--shadow: 0px 7px 10px 0px rgba(0,0,0,.3);
}
/*global style container*/
.container{
max-width: 1360px;
}
/*Navbar styles*/
.navbar{
box-shadow: 0px 3px 3px -3px rgb(0, 0, 0);
width: 100%;
font-size: 1.8rem;
font-family: var(--ff2);
}
.navbar ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.navbar ul a{
display: block;
padding: 2rem;
text-align: center;
text-transform: uppercase;
font-weight: var(--fw-n)
}
.navbar ul a:hover{
background-color: var(--bg-color);
color: var(--white);
}
.navbar .logo{
float: left;
display: block;
font-size: 2rem;
padding: 1.5rem;
text-decoration: underline;
text-decoration-thickness: 0.2rem;
text-underline-offset: 0.5rem;
}
.navbar .menu{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.navbar .menu-icon{
padding: 2.8rem 2rem;
position: relative;
float: right;
cursor: pointer;
}
.navbar .menu-icon .nav-icon{
background: var(--bg-color);
display: block;
height: .2rem;
width: 1.8rem;
position: relative;
transition: background .2s ease-out;
}
.navbar .menu-icon .nav-icon:before{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: .5rem;
}
.navbar .menu-icon .nav-icon:after{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -.5rem;
}
.navbar .menu-btn{
display: none;
}
.navbar .menu-btn:checked ~ .menu{
max-height: 36rem;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon{
background: transparent;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:before{
transform: rotate(-45deg);
top: 0;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:after{
transform: rotate(45deg);
top: 0;
}
/*Homepage main section*/
.home-hero{
margin: 1rem auto;
}
.flex-container{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
}
.img-hero{
width: 90%;
margin-top: 2rem;
margin-bottom: 2rem;
padding-bottom: -3px;
}
.info-hero{
width: 90%;
font-family: var(--ff);
border: 1px solid var(--outline-color);
padding: 3rem;
background-color: var(--bg-color);
}
/*Image styles*/
.img-hero img{
max-width: 100%;
object-fit: contain;
max-height: 100%;
margin-bottom: -3px;
border: 1px solid var(--outline-color);
}
/*Info styles*/
.info-hero h1{
font-size: 3rem;
color: var(--white);
}
.info-hero h2{
font-size: 2rem;
font-style: italic;
color: var(--red);
}
.info-hero h1 h2{
font-family: var(--ff2);
}
.info-hero p{
font-size: 1.2rem;
text-align: justify;
color: var(--alt-txt);
}
/*Media for Navbar*/
#media (min-width: 760px) {
.navbar{
height: 6.7rem;
}
.navbar li{
float: left;
}
.navbar li a{
padding: 2rem 2.5rem;
}
.navbar .menu{
clear: none;
float: right;
max-height: none;
}
.navbar .menu-icon{
display: none;
}
.navbar .logo{
padding: 2rem;
}
.flex-container{
flex-direction: row;
margin: 2rem auto;
}
.img-hero{
width: 50%;
margin: inherit;
}
.info-hero{
width: 45%;
padding: 2rem;
}
#even{
flex-direction: row-reverse;
}
}
Here is a simple example I just wrote for you, you may adjust it according to your needs.
.flex-container {
display: flex;
margin-bottom: 1rem;
}
.img-hero, .info-hero {
max-width: 50%;
}
.img-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-hero {
background: violet;
color: white;
}
.info-hero > * {
padding: 0.5rem 1rem;
}
<div class="flex-container">
<div class="img-hero">
<img src="https://picsum.photos/900/700" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="img-hero">
<img src="https://picsum.photos/800/600" alt="">
</div>
</div>
I've made a diagonal scroll page but when I applied the plugin to make it scroll this way the navbar was not fixed anymore, plus my sections aren't centered, I mean they're displayed vertically instead of diagonally, I don't know how to display them that way, any solutions? My top priority is the navbar, but if I can fix both things in one question, even better. Thanks SO community!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background-color: #900c3f;
font-family: Montserrat;
height: 100vh;
color: #F5F5F5;
overflow: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
nav {
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}
.nav-links li a {
display: inline-block;
padding-bottom: 4px;
background-image: linear-gradient(#F5F5F5, #F5F5F5);
background-position: 0 100%;
/*OR bottom left*/
background-size: 0% 5px;
border-radius: 5px;
background-repeat: no-repeat;
transition: background-size 0.3s, background-position 0s 0.3s;
/*change after the size immediately*/
}
.nav-links li a:hover {
background-position: 100% 100%;
/*OR bottom right*/
background-size: 100% 5px;
border-radius: 5px;
}
/*.nav-links li a{
display: inline-block;
}
.nav-links li a:after {
content: '';
width: 0;
height: 5px;
display: block;
background: #F5F5F5;
transition: 300ms;
border-radius: 5px;
} */
.nav-links li a:hover:after {
width: 100%;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}
.nav-links li {
list-style: none;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 17vh;
background-color: #ff5733;
display: flex;
flex-direction: column;
font-size: 80%;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.nav-active {
transform: translateX(0%);
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
justify-content: center;
align-items: center;
}
section p {
font-size: 1.5rem;
justify-content: center;
align-items: center;
}
/* Section Images */
section#home {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght#900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->
<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<header>
<nav>
<img src="Graphic logo.png" alt="Subworld Productions">
<ul class="nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section id="home">
<h1>HOME PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="portfolio">
<h1>PORTFOLIO PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="submit">
<h1>SUBMIT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h1>CONTACT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="about">
<h1>ABOUT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</header>
<!-- <script src="javascript/app.js"></script>
<script src="skrollr.js"></script>-->
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
skrollr.init();
</script>
</body>
There were a few issues with your css. The first is that you had multiple declarations for nav link attributes. I grouped them and adjusted them (more later) I also tidied your css to put your css in order: nav links first then nav links li then nav links li a etc, because css is read in that order. You had display:flex; and position:absolute in one css class - these conflict, and i removed the absolute positioning.
What was really throwing out your ul however, making the links non-viewable, was the translateX - translating your links by 100% was moving your links out of sight. I commented this out. As-is (now) your links display, animate on hover, and scroll-to the appropriate section when clicked. One more note: you had two semi-colons after the urls in your sections. I corrected this both in your posted code and snippet code.
Hope this helps
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
body {
background-color: #900c3f;
font-family: Montserrat;
height: 100vh;
color: #F5F5F5;
overflow: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
nav {
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
/* position: absolute;
right: 0px;*/
height: 10vh;
top: 17vh;
background-color: #ff5733;
flex-direction: row;
font-size: 80%;
align-items: center;
/*transform: translateX(100%);*/
transition: transform 0.5s ease-in;
}
.nav-links li {
list-style: none;
color: #ffffff;
}
.nav-links li a {
display: inline-block;
color: #ffffff;
}
.nav-links li a:after {
content: '';
width: 0;
height: 5px;
display: block;
background: #F5F5F5;
transition: 300ms;
border-radius: 5px;
}
.nav-links li a:hover:after {
width: 100%;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.nav-active {
transform: translateX(0%);
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
justify-content: center;
align-items: center;
}
section p {
font-size: 1.5rem;
justify-content: center;
align-items: center;
}
/* Section Images */
section#home {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
}
section#portfolio {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
}
section#submit {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
}
section#contact {
background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;
}
section#about {
background: url('https://source.unsplash.com/user/erondu/1600x900') no-repeat center center/cover;
}
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:wght#900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Subworld Productions</title>
<!-- <link rel="stylesheet" href="css/styles.css">-->
<body data-0="transform:translateX(0%)" data-4000="transform:translateX(-300%)">
<header>
<nav>
<img src="Graphic logo.png" alt="Subworld Productions">
<ul class="nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section id="home">
<h1>HOME PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="portfolio">
<h1>PORTFOLIO PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="submit">
<h1>SUBMIT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="contact">
<h1>CONTACT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="about">
<h1>ABOUT PAGE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</header>
<!-- <script src="javascript/app.js"></script>
<script src="skrollr.js"></script>-->
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js">
skrollr.init();
</script>
</body>
I have a problem with my responsive menu when I switch to a very small window I have my menu displayed but have seen the contents of the page suddenly impossible to click on the links.
So I can't find where I made a mistake.
Thank you...
$(document).ready(function() {
let menu = $('#menu');
let navegation = $('#navegation');
let scrollZero = 0;
$('#icon-menu').on('click', function() {
$(this).toggleClass('fa-times fa-bars');
$('body').toggleClass('no-scroll-y');
navegation.toggleClass('menu-active');
});
$('.submenu').on('click', function() {
$(this).siblings('.submenu').children('.children').slideUp();
$(this).siblings('.submenu').children('a').children('.caret').removeClass('rotate');
$(this).children('a').children('.caret').toggleClass('rotate');
$(this).children('.children').slideToggle();
});
$(window).on('click', function(e) {
if (menu.has(e.target).length == 0 && !menu.is(e.target)) {
$('.submenu').children('.children').slideUp();
$('.submenu').children('a').children('.caret').removeClass('rotate');
if ($(this).width() < 900 && navegation.hasClass('menu-active')) {
$('#icon-menu').trigger('click');
}
}
});
$(window).on('load scroll resize', function () {
let positionScrollY = $(window).scrollTop();
if (positionScrollY < scrollZero) {
menu.removeClass('scroll-down');
} else {
$('.submenu').children('.children').slideUp();
$('.submenu').children('a').children('.caret').removeClass('rotate');
menu.addClass('scroll-down');
}
scrollZero = positionScrollY;
if (positionScrollY == 0) {
menu.removeClass('scroll-down');
}
});
$(window).on('resize', function() {
$('body').removeClass('no-scroll-y');
if ($(this).width() > 900 && !navegation.hasClass('menu-active')) {
$('#icon-menu').addClass('fa-bars').removeClass('fa-times');
navegation.removeClass('menu-active');
} else if ($(this).width() < 900 && navegation.hasClass('menu-active')) {
$('body').addClass('no-scroll-y');
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:focus {
outline: 0;
}
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
background-color: #fefefe;
}
a {
text-decoration: none;
}
/*------------------------------------*\
-------- Navigation
\*------------------------------------*/
.no-scroll-y {
overflow-y: hidden;
}
header {
background-color: #FFFFFF;
background-image: url("images/noise.png");
background-repeat: repeat;
width: 100%;
height: 54px;
}
.scroll-down,
.scroll-down .btn-menu {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.menu-bar {
display: none;
}
header nav::-webkit-scrollbar {
width: 7px;
}
header nav::-webkit-scrollbar-thumb {
background-color: rgba(77, 77, 77, 0.9);
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset,
0 -1px 0 rgba(255, 255, 255, 0.2) inset;
}
header nav {
max-width: 1270px;
height: 54px;
margin: 0 auto;
}
.menu-active {
opacity: 1;
-webkit-transform: perspective(500px) rotateY(0deg);
transform: perspective(500px) rotateY(0deg);
}
header nav ul {
/*display: flex;
justify-content: space-around;*/
list-style: none;
}
header nav ul li {
display: inline-block;
position: relative;
}
header nav ul li a {
color: #1D3B6A;
display: block;
padding: 16px 10px;
font-family: 'Oswald';
font-size: 1.2rem;
}
header nav ul li a:hover {
color: #FC5342;
}
header nav ul li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
header nav ul li a:hover:before {
visibility: visible;
background-color: #1D3B6A;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
header nav ul li a span {
margin-right: 10px;
}
header nav ul li .caret {
margin: 0 0 0 10px;
position: relative;
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
}
header nav ul li .caret.rotate {
-webkit-transform: rotateZ(-180deg);
transform: rotateZ(-180deg);
}
header nav ul li .children {
background-color: #FFFFFF;
padding: 10px;
border-radius: 5px;
position: absolute;
min-width: 280px;
right: 0;
top: 70px;
box-shadow: 0 2px 6px rgba(0,21,64,.1),0 10px 20px rgba(0,21,64,.05);
display: none;
-webkit-animation: children .4s cubic-bezier(.7,.006,.2,1);
animation: children .4s cubic-bezier(.7,.006,.2,1);
-webkit-transform-origin: top right;
transform-origin: top right;
z-index: 10000;
}
#-webkit-keyframes children {
from {
-webkit-transform: translateY(-1rem) scale(.9);
transform: translateY(-1rem) scale(.9);
opacity: 0;
}
to {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1;
}
}
#keyframes children {
from {
-webkit-transform: translateY(-1rem) scale(.9);
transform: translateY(-1rem) scale(.9);
opacity: 0;
}
to {
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1;
}
}
/*
header nav ul li:hover .children,
header nav ul li:focus .children,
header nav ul li:active .children {
display: block;
}
*/
header nav ul li .children li {
display: block;
overflow: hidden;
}
header nav .right {
float: right;
}
header nav ul li .children li a {
display: block;
color: #828282;
font-size: 15px;
padding: 10px;
font-weight: 500;
font-family: Roboto;
}
header nav ul li .children li a:hover {
color: #AAB74E;
font-size: 15px;
}
header nav ul li .children li a span {
float: right;
font-size: 0.5em;
margin: 0 0 0 10px;
position: relative;
top: 5px;
}
/*------------------------------------*\
-------- Content
\*------------------------------------*/
.hita-main {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1270px;
}
#hita-top {
padding-top: 40px;
}
.hita-row {
margin-right: -15px;
margin-left: -15px;
}
.hita-m-1,
.hita-m-2,
.hita-m-3 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 25px;
}
/*------------------------------------*\
-------- Responsive ( Min )
\*------------------------------------*/
#media (min-width: 320px) {
.hita-main {
max-width: 460px;
}
}
#media (min-width: 576px) {
.hita-main {
max-width: 540px;
}
}
#media (min-width: 768px) {
.hita-main {
max-width: 720px;
}
}
#media (min-width: 992px) {
.hita-main {
max-width: 960px;
}
}
#media (min-width: 1280px) {
.hita-main {
max-width: 1270px;
}
.hita-m-1, .hita-m-2, .hita-m-3 {
float: left;
}
.hita-m-3 {
width: 100%;
}
.hita-m-2 {
width: 75%;
}
.hita-m-1 {
width: 25%;
}
}
/*------------------------------------*\
-------- Responsive ( Max )
\*------------------------------------*/
#media screen and (max-width: 900px) {
.menu-bar {
display: block;
width: 100%;
}
.menu-bar .btn-menu {
background-color: #FFFFFF;
background-image: url("images/noise.png");
background-repeat: repeat;
color: #193767;
cursor: auto;
display: block;
font: bold 25px 'Arial', sans-serif;
left: 0;
padding: 16px;
position: relative;
top: 0;
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
width: 100%;
z-index: 1;
}
.menu-bar .btn-menu span {
cursor: pointer;
float: right;
font-size: 25px;
}
header nav {
height: calc(100% - 69px);
left: 0;
margin: 0;
opacity: 0;
overflow: auto;
position: fixed;
top: calc(70px - 1px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: perspective(500px) rotateY(90deg);
transform: perspective(500px) rotateY(90deg);
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
width: 80%;
background-color: #012345;
background-image: url("images/noise.png");
background-repeat: repeat;
}
header nav ul {
/*flex-direction: column;*/
}
header nav ul li {
border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
display: block;
}
header nav ul li .caret {
float: right;
}
header nav ul li .children {
display: none;
position: relative;
width: 100%;
top: 0;
border-radius: 0px;
background-color: #FFFFFF;
background-image: url("images/noise.png");
background-repeat: repeat;
}
header nav ul li:hover .children,
header nav ul li:focus .children,
header nav ul li:active .children {
display: none;
}
header nav ul li .children li a {
margin-left: 20px;
}
header nav .right {
float: left;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Menu dropdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/v4-shims.css">
</head>
<body>
<header id="menu">
<div class="menu-bar">
<a href="javascript:void(0);" class="btn-menu">
<span id="icon-menu" class="fa fa-bars"></span>
</a>
</div>
<nav id="navegation">
<ul>
<li><i class="fas fa-home"></i></li>
<li>Lorem</li>
<li>Lorem</li>
<li class="submenu">Lorem
<ul class="children">
<li>Lorem #1</li>
<li>Lorem #2</li>
<li>Lorem #3</li>
<li>Lorem #4</li>
<li>Lorem #5</li>
</ul>
</li>
<li class="submenu">Lorem
<ul class="children">
<li>Lorem #1</li>
<li>Lorem #2</li>
<li>Lorem #3</li>
<li>Lorem #4</li>
<li>Lorem #5</li>
</ul>
</li>
<li class="submenu">Lorem
<ul class="children">
<li>Lorem #1</li>
<li>Lorem #2</li>
<li>Lorem #3</li>
<li>Lorem #4</li>
<li>Lorem #5</li>
</ul>
</li>
<li class="right">Lorem</li>
</ul>
</nav>
</header>
<!-- +++++ Section - Content +++++ -->
<div class="hita-main" id="hita-top">
<div class="hita-row">
<div class="hita-m-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- Menu Right -->
<div class="hita-m-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</body>
</html>
This is if someone could help me explain or I made a mistake thank you ...
Try to add z-index to the nav link in order to bring it to cover the div.
header nav ul li a {
color: #1D3B6A;
display: block;
padding: 16px 10px;
font-family: 'Oswald';
font-size: 1.2rem;
z-index: 1;
See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Thank you very much for your help I found my error I forgot the z-index but not where you told me but I found thank you...
header nav {
height: calc(100% - 69px);
left: 0;
margin: 0;
opacity: 0;
overflow: auto;
position: fixed;
top: calc(70px - 1px);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: perspective(500px) rotateY(90deg);
transform: perspective(500px) rotateY(90deg);
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
width: 80%;
background-color: #012345;
background-image: url("images/noise.png");
background-repeat: repeat;
z-index: 1;
}
When I hover on my button my H2 and paragraph wiggle. How can I prevent it? As you can see I would like to add more border during hovering. Is it a cause this situation?
.about-me-wrapper {
background-color: #fff;
width: 50%;
margin: 10em auto;
height: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.about-me-wrapper p {
width: 70%;
line-height: 1.75;
}
.about-me-wrapper a {
background: transparent;
border: 2px solid #000;
padding: 10px 20px;
margin: 20px 0;
font-weight: 700;
text-transform: uppercase;
transition: all .4s;
display: inline-block;
}
.about-me-wrapper a:hover {
cursor: pointer;
border: 3px solid #4EADFF;
color: #4EADFF;
transform: scale(1.1);
}
<section class="about-me">
<div class="about-me-wrapper">
<h2>Aarhus Lejerboliger</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
View project
</div>
</section>
I am stuck here, i want to make fix nav with full height section with content but second section is not going good after scroll, need help.
Below my tried code:
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: 100vh;
background: #303030;
margin: 0px;
padding: 0px;
}
section p {
margin-top: 54px;
color: #fff;
}
section.green {
background: green;
height: 100vh;
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<section>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
Can anyone help me out and provide me a solution to my problem?
You have nested <section> which is not recommended, a better approach should replace your outer <section> with <div class="wrapper">...</div>
Then use a wrapper class to set the margin-top: 54px which is the height of nav.
.wrapper {
margin-top: 54px;
height: 100vh;
background: #303030;
padding: 0px;
}
For the overlap, use calc to set the height dynamically height: calc(100vh - 52px);
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: 100vh;
background: #303030;
margin: 0px;
padding: 0px;
}
.wrapper {
margin-top: 54px;
height: 100vh;
background: #303030;
padding: 0px;
}
section p {
color: #fff;
}
section.green {
background: green;
height: calc(100vh - 52px);
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
You can use calc() to calculate the height of the sections
height: calc(100vh - 54px); /*54px is the height of the nav*/
So this will make the height of each section have the height of the screen minus the height of the nav.
And to remove the space between the sections you need to remove margin-top from the p tag and add padding-top:54px;to the container, again 54px is the height of the nav, and that for the sections to start right after the nav
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
height: 100vh;
padding-top:54px;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: calc(100vh - 54px);
background: #303030;
margin: 0px;
padding: 0px;
}
section p {
color: #fff;
}
section.green {
background: green;
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>