When I add the line "perspective: 1px" to my css file, the navbar is no longer fixed on top and starts scrolling. Why is that and how can I fixed that? Note that I need perspective for parallax effect and it cannot be omitted.
I am sure it's because of the perspective, because when I remove this line the navbar is fixed.
Here are my codes:
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
main {
padding-top: 50px;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
html {
overflow: hidden;
}
body {
margin: 0;
font-size: 26px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #ffffff;
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-wrapper {
width: 100vw;
height: 100vh;
padding-top: 20vh;
box-sizing: border-box;
transform-style: preserve-3d;
}
.parallax-wrapper::before {
content: "";
width: 100vw;
height: 100vh;
top: 300px;
left: 0;
background-image: url("1.JPG");
position: absolute;
z-index: -1;
transform: translateZ(-5px) scale(6);
}
.regular-wrapper {
width: 100vw;
height: 100vh;
padding-top: 20vh;
background-image: url("2.JPG");
z-index: 2;
position: relative;
}
.content {
margin: 0 auto;
padding: 50px;
width: 50%;
background: #aaa;
}<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<main>
<div class="parallax-wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .... .... Donec in justo eu ligula semper consequat sed a risus.</p>
</div>
</div>
<div class="regular-wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .... .... Donec in justo eu ligula semper consequat sed a risus.</p>
</div>
</div>
</main>
</body>
</html>
