Navbar collapsing without Bootstrap - html

Hi I was trying to get my navigation bar to collapse on smaller screen size I am trying to do this without bootstrap any suggestions?
HTML
<html>
<head>
<title></title>
<!-- CSS STYLESHEET -->
<link rel="stylesheet" type="text/css" href="index.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy|Montez|Courgette|Slackey|Fontdiner+Swanky|Permanent+Marker|Aclonica|Lobster" rel='stylesheet' type='text/css'>
<!-- JavaScript's -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<script type="text/javascript">
$(function() {
// note that this doens't call hide
$('#loading').delay(3000).fadeOut('slow');
});
</script>
<body>
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div id="object"></div>
</div>
</div>
</div>
<!-- Loading Section Ends -->
<div class="header">
<nav class="nav_first">
<img class="nike" src="http://s3.amazonaws.com/nikeinc/assets/7366/Nike_Swoosh_Logo_White_original.jpg?1328660973">
<ul>
<li class="wiggle" class="wiggle" class="wiggle" class="wiggle">Home</li>
<li class="wiggle" class="wiggle" class="wiggle">About Us</li>
<li class="wiggle" class="wiggle">Shop</li>
<li class="wiggle">Contact</li>
</ul>
</nav>
</div>
<div class="wrapper">
<div>
<h1 id="nike_text">Nike</h1>
</div>
</div>
</body>
</html>
CSS
body {
width: auto;
height: auto;
font-size:14px;
margin:0;
background-color:black;
}
#loading {
display:none;
background-color: #bd4932;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#object{
width: 80px;
height: 80px;
background-color: #FFF;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
margin-right: auto;
margin-left: auto;
margin-top: 60px;
}
#-webkit-keyframes animate {
0% { -webkit-transform: perspective(160px); }
50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
#keyframes animate {
0% {
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
} 50% {
transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
} 100% {
transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}
/* SASU - Navigation Bar */
.nav_first{
overflow:none;
list-style-type:none;
margin:0;
padding:0;
text-align:center;
}
.nav_first li{
display:inline;
}
.nav_first a{
margin-top:25px;
font-size: 30px;
letter-spacing: 3px;
font-weight:900;
margin-left:40px;
margin-right:40px;
font-family: 'Montserrat';
text-decoration: none;
display:inline-block;
padding:10px;
}
.nav_first a:hover {
color:white;
font-size:35px;
}
#-webkit-keyframes wiggle {
0% {
-webkit-transform:rotate(4deg);
}
50% {
-webkit-transform:rotate(-4deg);
}
100% {
-webkit-transform:rotate(4deg);
}
}
.wiggle:hover {
-webkit-animation: wiggle 0.5s infinite;
}
.active {background-color:orangered;}
img{
float:left;
margin:0 auto;
padding:0 auto;
}
/* Middle Section */
.nike {
display: block;
margin:auto;
height:115px;
}
#nike_text {
font-family:'Montez';
font-size:80px;
text-align: center;
color:white;
margin:auto;
letter-spacing: 2px;
}

Related

How can a centered <hr> be absolutely placed within a div, without losing its center alignment?

I need this to be placed 20px from the bottom of the page, but every time I try to give it absolute positioning, it jumps halfway outside the div or it becomes longer.
It was centered using display:flex and justify-content:center. The exact same problem occurs with the socila icons, which need to be at the top on desktop and at the bottom on mobile, but if I give them an absolute position, then they are no longer centered.
Here is the entire page for you to see what I need, and thank you so much for your time:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/234b945d49.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
transition: 0.3s;
}
#main-menu-container{
right:0;
}
.sidenav {
padding:0;
height: 100%;
margin:0;
width: 0px;
position: fixed;
z-index: 1;
top: 0px;
right: 0;
background: radial-gradient(#3d77a7, #264c6d);
overflow-x: hidden;
transition: 0.5s ease-in-out;
text-align: center;
}
.sidenav ul{
list-style: none;
padding: 150px 0 0 0;
text-align:center;
display: inline-block;
}
.sidenav ul a {
padding: 8px 8px 8px 8px;
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
color:white;
font-weight:bold;
display: block;
transition: 0.3s;
}
.sidenav ul a:hover {
color: #ffdc00;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 20px;
font-size: 36px;
margin-left: 50px;
color:#ffdc00;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/* #media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
} */
#nav-icon3 {
width: 40px;
height: 30px;
position: fixed;
top:20px;
right:20px;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span{
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #ffdc00;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 12px;
}
#nav-icon3 span:nth-child(4) {
top: 24px;
}
#nav-icon3.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.social-icons {
display: flex;
justify-content: center;
position:absolute;
top: 20px;
}
.social-icons i{
color:#ffdc00;
padding:5px;
transition: 0.3s;
}
.social-icons i:hover{
color: white;
}
.menu-separator {
/* position:relative;
bottom:50px; */
border: none;
border-radius: 2px;
height: 7px !important;
opacity: 100%;
color: #ffdc00; /* old IE */
background: #ffdc00; /* Modern Browsers */
width: 80%;
margin: 20px auto 20px auto;
}
.menu-additional-links{
display: flex;
justify-content: center;
width: 80%;
margin: auto;
}
.menu-additional-links a{
text-decoration: none;
padding: 20px 15px 20px 15px;
color: white;
}
.menu-additional-links a:hover{
color: #ffdc00;
}
/*MOBILE BREAKPOINTS*/
#media only screen and (max-width: 768px) {
}
</style>
</head>
<body>
<div id="main-menu-container">
<div id="mySidenav" class="sidenav" role="navigation">
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
<div class="social-icons">
<i class="fab fa-facebook-square fa-2xl"></i>
<i class="fab fa-instagram-square fa-2xl"></i>
<i class="fab fa-linkedin fa-2xl"></i>
</div>
<hr class="menu-separator">
<div class="menu-additional-links">
Datenschutzerklärung
Impressum
</div>
</div>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span class="breakpoint"></span>
</div>
<script>
//check screen width via javascript, and pass a diffrent width to the nav menu
const mediaQuery = window.matchMedia('(min-width: 768px)')
let menuWidth = "";
if (mediaQuery.matches){menuWidth = "500px";} else {menuWidth = "100vw";}
function handleScreenChange(e){
if (mediaQuery.matches){
menuWidth = "500px";
} else {
menuWidth = "100vw";
}
}
mediaQuery.addListener(handleScreenChange);
//set the width and play the animation on hamburger click
$("#nav-icon3").click(function() {
if (document.getElementById('nav-icon3').classList.contains("open")){
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
else{
document.getElementById("mySidenav").style.width = menuWidth;
document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
}
document.getElementById('nav-icon3').classList.toggle("open");
});
</script>
</body>
</html>

You can try with this styles to hr
position: absolute;
bottom: 20px;
margin-left: 10%;
You have 80% for the width, so a left of 10% makes hr centered

weird gap between top of div and wrapper

Can anyone help with the weird gap between the "arrow wrapper 2" div and "about" div as i dont understand why its there and where it is coming from. As i need the arrow at the bottom of the "about" div but i cannot use absolute as that messes everything up. So i tried making a wrapper but it is not 100vh of the div, weirdly. Any help would be amazing!!
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
#import "compass/css3";
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: 'Josefin Sans', sans-serif;
}
#main{
width:100%;
height:100vh;
background:#ED4C67;
text-align: center;
display: block;
}
/* Typewriter */
.typewrite{
color:#fff;
text-decoration:none;
font-family: 'Josefin Sans', sans-serif;
font-size:60px;
display:block;
}
/* arrow */
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
i {
display: block;
color: #fff;
}
.arrow {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px;
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#about {
width:100%;
height:100vh;
background: white;
display:block;
}
.wrapper {
height: 100%;
vertical-align: middle;
display: table-cell;
text-align: center;
}
.skull {
width:50%;
float:left;
}
.about_para {
display:block;
color:#ED4C67;
font-size:40px;
}
#media only screen and (max-width: 700px) {
}
.vertical-center {
position: relative;
top:50%;
left: 0%;
transform:translate(0%, -50%);
-webkit-transform:translate(0%, -50%);
}
.arrow2 {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px;
}
#portfolio {
width:100%;
height:100vh;
background:#ED4C67;
display:block;
position:bottom;
}
.wrappert {
height: 100%;
width: 100%;
display: table;
}
.arrow-wrapper {
position: relative;
}
.arrow-wrapper-2 {
position: relative;
height:100vh;
}
<!DOCTYPE html>
<html>
<head>
<title>JAKUB ORZEG-WYDRA</title>
<link rel="stylesheet" type="text/css" href="main.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script src="main.js"></script>
<div id="main">
<div class="wrappert">
<div class="wrapper">
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Jakub Orzeg-Wydra.", "Im a web designer.", "and a Media Producer." ]'>
</a>
</h1>
</div> </div>
<div class="arrow-wrapper"><div class="arrow bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></div></div>
</div>
<div id="about">
<div class="vertical-center">
<center><p class="about_para">I am a 15 year old from scotland who <br>
loves to code and produce media like <br>
videos. I also love sports and fitness.</p></center></div>
<div class="arrow-wrapper-2"><div class="arrow2 bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true" style="color:red;"></i></div></div>
</div>
<div id="portfolio">
</div>
</body>
</html>

It's simple, in that section you have two element. The first one with the height of it's content and the second one with 100vh and both are in-flow elements (as the first one is only set to position:relative) so if you do the total you have more than 100vh. That's why the arrow that belong to 100vh section is outside.
If we refer to the documentation:
relative
The element is positioned according to the normal flow of the
document, and then offset relative to itself based on the values of
top, right, bottom, and left. The offset does not affect the position
of any other elements; thus, the space given for the element in the
page layout is the same as if position were static.
To fix this you need to use absolute position with the first element (remove it from the flow so no more height considered) and make its parent relative position.
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
#import "compass/css3";
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: 'Josefin Sans', sans-serif;
}
#main {
width: 100%;
height: 100vh;
background: #ED4C67;
text-align: center;
display: block;
}
/* Typewriter */
.typewrite {
color: #fff;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
font-size: 60px;
display: block;
}
/* arrow */
#-moz-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
i {
display: block;
color: #fff;
}
.arrow {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px;
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#about {
width: 100%;
height: 100vh;
background: white;
display: block;
position:relative;
}
.wrapper {
height: 100%;
vertical-align: middle;
display: table-cell;
text-align: center;
}
.skull {
width: 50%;
float: left;
}
.about_para {
display: block;
color: #ED4C67;
font-size: 40px;
text-align:center;
}
#media only screen and (max-width: 700px) {}
.vertical-center {
position: absolute;
top: 50%;
left: 0;
right:0;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
.arrow2 {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px;
}
#portfolio {
width: 100%;
height: 100vh;
background: #ED4C67;
display: block;
position: bottom;
}
.wrappert {
height: 100%;
width: 100%;
display: table;
}
.arrow-wrapper {
position: relative;
}
.arrow-wrapper-2 {
position: relative;
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<title>JAKUB ORZEG-WYDRA</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script src="main.js"></script>
<div id="main">
<div class="wrappert">
<div class="wrapper">
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Jakub Orzeg-Wydra.", "Im a web designer.", "and a Media Producer." ]'>
</a>
</h1>
</div>
</div>
<div class="arrow-wrapper">
<div class="arrow bounce">
<i class="fa fa-angle-down fa-5x" aria-hidden="true"></i>
</div>
</div>
</div>
<div id="about">
<div class="vertical-center">
<p class="about_para">I am a 15 year old from scotland who <br> loves to code and produce media like <br> videos. I also love sports and fitness.</p>
</div>
<div class="arrow-wrapper-2">
<div class="arrow2 bounce">
<i class="fa fa-angle-down fa-5x" aria-hidden="true" style="color:red;"></i>
</div>
</div>
</div>
<div id="portfolio">
</div>
</body>
</html>

Full Width - Owl Carousel 2 issue

Attempting to create a full-width owl-carousel but I keep seeing this on .owl-stage when I inspect-element on chrome:
element.style {
transform: translate3d(-1872px, 0px, 0px);
transition: 0s;
width: 7264px;
padding-left: 200px;
padding-right: 200px;
}
Initially I tried to just overwrite padding on .owl-stage, but the padding stayed the same.
I also tried setting min-width for all images to 100% and 100vw, but that hasn't worked either.
Is there anyway to adjust the padding on .owl-stage?
This is my code:
$('.owl-carousel').owlCarousel({
stagePadding: 200,
loop:true,
margin:0,
singleItem:true,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
dots:true,
// autoplay: true,
// autoplayHoverPause: true,
responsive:{
0:{
items:1,
stagePadding: 60
},
600:{
items:1,
stagePadding: 100
},
1000:{
items:1,
stagePadding: 200
},
1200:{
items:1,
stagePadding: 250
},
1400:{
items:1,
stagePadding: 300
},
1600:{
items:1,
stagePadding: 350
},
1800:{
items:1,
stagePadding: 400
}
}
});
body {
padding: 0;
margin: 80px 0 0 0;
font-family: Merriweather;
}
.owl-carousel:after {
content: "";
display: block;
position: absolute;
width: 8%;
top: 0;
bottom: 0;
left: 50%;
margin-left: 0;
pointer-events: none;
background: url() no-repeat center 50%;
background-size: 100% auto;
}
.owl-stage{
min-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
opacity: 0.4;
transition: .4s ease all;
transform: scale(.6);
}
.item img{
display: block;
min-width: 100%;
width: auto;
height: auto;
max-height: 680px !important;
}
.active .item {
display: block;
width: 100%;
height: auto;
opacity: 1;
transform: scale(1);
max-height: 680px !important;
}
/* content and cta */
.inner {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
}
/* END CTA Button*/
/* Title Animation */
.reveal-text,
.reveal-text:after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
position: relative;
-webkit-user-select: none;
user-select: none;
color:#ffe221;
text-shadow: 1px 1px #000000;
white-space: nowrap;
}
.reveal-text:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #8ce2ea;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}
.active .reveal-text{
-webkit-animation-name: reveal-text;
animation-name: reveal-text;
}
.active .reveal-text:after {
-webkit-animation-name: revealer-text;
animation-name: revealer-text;
}
/* Before animation */
#-webkit-keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
#keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
/* After animation */
#-webkit-keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
#keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
/* Title Animation END */
/* OWL-Carousel Navigation*/
.owl-nav div {
position: absolute;
top: 45%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: 5% !important;
}
.owl-nav .owl-next {
right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
text-shadow: 2px 2px #000000;
transform: translateX(10%);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.owl-prev:hover{
text-shadow: -2px 2px #000000;
transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
width: 0;
}
.owl-dots {
text-align: center;
position: fixed;
margin-top: 10px;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/
#media only screen and (max-width:768px) {
#full-width{
padding: 0;
}
.item{
transform: scale(0);
}
.item img{
height: 400px !important;
}
.active .item img{
max-height: 400px;
}
}
#media only screen and (max-width:420px) {
.item img{
height: 200px !important;
}
.active .item img{
max-height: 200px;
}
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tanya-UI-Kit-3 Full Page Width</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
</head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="item">
<img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap js-cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
</html>

Set items: 1, stagePadding: 0 on the carousel, body { margin: 0; }, removed your styling for .owl-stage (didn't do anything), and removed the max-height you had set on the images, which would distort them with min-width: 100% specified.
$('.owl-carousel').owlCarousel({
stagePadding: 0,
items: 1,
loop:true,
margin:0,
singleItem:true,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
dots:true
});
body {
padding: 0;
margin: 0;
font-family: Merriweather;
}
.owl-carousel:after {
content: "";
display: block;
position: absolute;
width: 8%;
top: 0;
bottom: 0;
left: 50%;
margin-left: 0;
pointer-events: none;
background: url() no-repeat center 50%;
background-size: 100% auto;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
opacity: 0.4;
transition: .4s ease all;
transform: scale(.6);
}
.item img{
display: block;
min-width: 100%;
width: auto;
height: auto;
}
.active .item {
display: block;
width: 100%;
height: auto;
opacity: 1;
transform: scale(1);
max-height: 680px !important;
}
/* content and cta */
.inner {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
}
/* END CTA Button*/
/* Title Animation */
.reveal-text,
.reveal-text:after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
position: relative;
-webkit-user-select: none;
user-select: none;
color:#ffe221;
text-shadow: 1px 1px #000000;
white-space: nowrap;
}
.reveal-text:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #8ce2ea;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}
.active .reveal-text{
-webkit-animation-name: reveal-text;
animation-name: reveal-text;
}
.active .reveal-text:after {
-webkit-animation-name: revealer-text;
animation-name: revealer-text;
}
/* Before animation */
#-webkit-keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
#keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
/* After animation */
#-webkit-keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
#keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
/* Title Animation END */
/* OWL-Carousel Navigation*/
.owl-nav div {
position: absolute;
top: 45%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: 5% !important;
}
.owl-nav .owl-next {
right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
text-shadow: 2px 2px #000000;
transform: translateX(10%);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.owl-prev:hover{
text-shadow: -2px 2px #000000;
transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
width: 0;
}
.owl-dots {
text-align: center;
position: fixed;
margin-top: 10px;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/
#media only screen and (max-width:768px) {
#full-width{
padding: 0;
}
.item{
transform: scale(0);
}
.item img{
height: 400px !important;
}
.active .item img{
max-height: 400px;
}
}
#media only screen and (max-width:420px) {
.item img{
height: 200px !important;
}
.active .item img{
max-height: 200px;
}
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tanya-UI-Kit-3 Full Page Width</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
</head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="item">
<img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap js-cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
</html>

I ran into the same issue when I upgraded to version 3 of this owl-carousel.
After a few trials, I found out adding a line in CSS worked for me.
.owl-carousel .owl-stage-outer{
transform:translate3d(0,0,0)
}

Trying to make this div rotate on load

I can't see what's wrong...but the div is not rotating
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
<style type="text/css">
.rotate
{
margin:121px 149px;
width:483px;
height:298px;
background:#676470;
color:#fff;
font-family:Tahoma;
font-size:2em;
text-align:center;
transition:all 5s ease;
-webkit-transform: rotateZ(-3240deg);
-ms-transform: rotateZ(-3240deg);
transform: rotateZ(-3240deg);
}
.rotate div {
padding-top: 3em;
}
.rotate:active
{
}
</style>
</head>
<body>
<div class="rotate"><div>Hello</div></div>
</body>
</html>

What you're looking for is called CSS3 animations.
Here's a demo of your example:
CODE SNIPPET:
.rotate {
margin: 121px 149px;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Tahoma;
font-size: 2em;
text-align: center;
animation: rotateZ 5s;
}
.rotate div {
padding-top: 3em;
}
#keyframes rotateZ {
to {
transform: rotateZ(-3240deg);
}
}
<div class="rotate">
<div>Hello</div>
</div>
JSFIDDLE

Scroll page parallax when I click on menu bar?

my question is related to this question parallax menu scrolling
I am trying to the same thing.
But, due to some issue, its not working. I think I am choosing the wrong id and class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SNAPCHAT</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/scrip.js"></script>
<script src="js/jquery.nicescroll.js"></script>
</head>
<body>
<a id="#nav1"></a>
<a id="#nav2"></a>
<a id="#nav3"></a>
<a id="#nav4"></a>
Back to Top
<div id="nav">
<!-- <div id="logo"><img src=""></div> -->
<ul>
<li>Home</span></li>
<li>Sponsored Snapchat</li>
<li>Snapchat Content</li>
<li>Display Ads</li>
<li>Media Central</li>
</ul>
</div id="main">
<div id="#nav1" class="image" data-stellar-background-ratio="0.5" >
<!-- <div id="content_1" class="content1">
-->
</div>
</div>
</div>
<div id="#nav2" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content2">
-->
</div>
<div id="#nav3" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content3">
-->
</div>
<div id="#nav4" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content4">
-->
</div>
<script type="text/javascript">
// create the back to top button
$('body').prepend('Back to Top');
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top, a.simple-back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});
</script>
</body>
</html>
this is my css
body{
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
background-color: #fffc00;
}
.image {
height: 750px;
width: 100%;
/*background: #55e6c5;*/
}
.content {
height: 750px;
width:100%;
/* background: white;*/
z-index: 2;
}
.content h1 {
font-size: 40px;
color: #464646;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
margin: 30px 60px;
}
.content p {
font-size:20px;
color: #343434;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin: 30px 60px;
}
#nav1 {
background: url(../images/bg1.png);
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav2 {
background: url(../images/bg2.png);
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav3 {
background: url(../images/bg3.png) ;
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav4 {
background: url(../Images/bg4.png) ;
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px 80px 0 80px ;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav {
height: 70px;
width: 100%;
position: fixed;
top:5px;
left:0;
background: #00000;
z-index: 100;
}
a[id= "#nav1"]:target ~ #main div.image {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[id= "#nav2"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "#nav3"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "#nav4"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
/*#nav #logo {
height: 50px;
width: 50px;
position: relative;
top: 0;
bottom:0;
margin: auto 100px;
text-align: left;
}*/
#nav #logo img {
height: 100%;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
opacity: 0.6;
filter: alpha(opacity=60)
}
li {
float: left;
padding-left:80px;
}
li a {
display: inline-block;
color: #fffc00;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: #fff;
}
a.back-to-top {
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: #333 url("../images/up-arrow.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/*#content_1 {position: relative;}*/
Please help me.
this is my code https://jsfiddle.net/vrg9qmp1/

Don't use # when defining an id attribute, only when referencing it in href or css selector. And only use the same id on a single element. So remove the a elements in the very beginning of your body, since you use the same ids later on.
This will not work.
<div id="#nav1">
<a href="nav1">
This will work:
<div id="nav1">
<a href="#nav1">