navigation buttons shift when responsive menu is clicked - javascript

Below is a navigation bar with a logo (home button) to the left and a call button and menu dropdown button to the right. Once the menu button is clicked and the dropdown menu is opened the call button moves to the right on top of the menu button and the entire navigation bar turns into just 1 button. What is causing this shift?
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="topnav" id="myTopnav">
Logo Name
Contact Us
Download
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
</a>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
</body>
</html>


The bars icon and phone icon are both using the same class, so they are both being assigned the same positioning properties. Make them separate classes so they can keep their unique positions instead of overlapping.
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .iconBars, .topnav .iconPhone {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.iconBars, .topnav a.iconPhone {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .iconBars {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive .iconPhone {
position: absolute;
right: 47px;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Logo Name
Contact Us
Download
<a href="javascript:void(0);" class="iconBars" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="tel:800-922-0204" class="iconPhone">
<i class="fas fa-phone"></i>
</a>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>


I see that you have a media query with position: absolute
#media screen and (max-width: 600px) {
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
This solution is without position: absolute
I removed the above from css, i give in .topnav
.topnav {
display: flex;
justify-content: space-between;
}
And put both your menu links and icons inside a div. Take a look in the code above.
I hope it helps you.
body {
position: relative;
height: 100vh;
margin: 0px;
background-color: #e6e6e6e6;
color: #444;
font: .9em Arial, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #185b9b;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #2672b2;
color: white;
}
.active {
background-color: #185b9b;
color: white;
}
.topnav .icon {
display: none;
}
.menu-icons {
display: flex;
height:48px;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.main {
padding: 16px;
margin-top: 30px;
height: 100%;
}
.wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
background-color: white;
}
#one {
float: left;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
width: 200px;
height: 100%;
}
#one img {
max-height: 25px;
max-width: 160px;
}
#two {
overflow: hidden;
margin: 10px;
min-height: 130px;
}
#media screen and (max-width: 910px) {
#one {
float: none;
margin-right: 10;
width: auto;
border: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="topnav" id="myTopnav">
<div>
Logo Name
Contact Us
Download
</div>
<div class="menu-icons">
<a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<div class="main">
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
<div class="wrapper">
<div id="one">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
<div id="two">
<h2>LOREM IPSUM</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
<br>
<p>
<p>
https://google.com/
</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
`

Related

HTML CSS JS formatting of display: none

Initially, my id="Gabel" display was shown on my page with the correct format but when input display: none; my formatting was distorted. Is there anything wrong with my code? I want to show display id="Gabel" when I click the image on the main page. Here are some of the codes. My problem lies in the formatting of my card with an id of Gabel. Thank you
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
/* display: none; */
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<!DOCTYPE html>
<html>
<head>
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</head>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')">
<img src="assets\image_1.jpg" alt="">
</button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>

Possibly try toggling opacity instead of display
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
opacity: 0;
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.opacity === "0") {
x.style.opacity = "0";
} else {
x.style.opacity = "1";
}
}
</script>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')"><img src="assets\image_1.jpg"
alt=""></button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

Try using visibility property, which leaves an element in normal document flow, display: none essentially removes the element completely from the document.
Here, if you need more detail.

Try using
visibility:hidden;
and
visibility: visible;
to hide and show the element

Responsive Text Issue

I have the following code:
body{
width:100%;
font-family:sans-serif;
background: transparent;
}
.testimonials{
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(350px, 1fr));
grid-gap:20px;
}
.testimonials .card{
position:relative;
width:350px;
margin:0 auto;
background:#333;
padding:20px;
box-sizing: border-box;
text-align:center;
box-shadow: 10px 8px 20px rgba(0,0,0,.5);
overflow: hidden;
}
.testimonials .card .layer{
position: absolute;
top: calc(100% - 3px);
width:100%;
height:100%;
left:0;
background:linear-gradient(#034e70, #390375);
z-index:1;
transition:0.5s;
}
.testimonials .card:hover .layer{
top:0;
}
.testimonials .card .content{
position:relative;
z-index:2;
}
.testimonials .card .content p{
font-size:18px;
line-height:24px;
color:#FFF;
}
#media all and (max-width: 500px) {
.testimonials .card .content p{
width: 100%;
}
}
.testimonials .card .content .image{
width:100px;
height:100px;
margin: 0 auto;
border-radius:50%;
overflow:hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba{0,0,0, .2};
}
.testimonials .card .content .details h2{
font-size:15px;
color:#fff;
}
.testimonials .card .content .details h2 span{
color:#03a9f4;
font-size:12px;
transition:0.5s;
}
.testimonials .card:hover .content .details h2 span{
color:#fff;
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>
I have the above code embedded in a website and so when I view the website on a smaller screen, I am getting this output:
The white text, image, and blue text are not responsive. However, the card is. Its just these three things, and I tried adding media queries to make them responsive but it did not work for some reason, and the output was the exact same as above.
Expected Output
When I inspect it and view it on 414 width, I am getting the above expected output which is what I want. However, below 414 width, I am getting the output as shown in the very first picture. How would I fix this? Any suggestions?

Try updating the grid-template-columns on media query for responsive design/mobile screen.
body {
width: 100%;
font-family: sans-serif;
background: transparent;
margin: 0;
}
.testimonials {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.testimonials .card {
position: relative;
max-width: 350px;
margin: 0 auto;
background: #333;
padding: 20px;
box-sizing: border-box;
text-align: center;
box-shadow: 10px 8px 20px rgba(0, 0, 0, .5);
overflow: hidden;
}
.testimonials .card .layer {
position: absolute;
top: calc(100% - 3px);
width: 100%;
height: 100%;
left: 0;
background: linear-gradient(#034e70, #390375);
z-index: 1;
transition: 0.5s;
}
.testimonials .card:hover .layer {
top: 0;
}
.testimonials .card .content {
position: relative;
z-index: 2;
}
.testimonials .card .content p {
font-size: 18px;
line-height: 24px;
color: #FFF;
}
.testimonials .card .content .image {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.testimonials .card .content .details h2 {
font-size: 15px;
color: #fff;
}
.testimonials .card .content .details h2 span {
color: #03a9f4;
font-size: 12px;
transition: 0.5s;
}
.testimonials .card:hover .content .details h2 span {
color: #fff;
}
#media all and (max-width: 500px) {
.testimonials {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
.testimonials .card .content p {
width: 100%;
}
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>

It's because you've set a fixed width of 350px for your element. When you make the window any smaller than ~370px wide, the fixed width prevents the element from getting any smaller. Try using relative sizes like % instead.

Modify CSS of main content when a side panel slides in

When the right panel is expanded, I want to fade out the content of the page and add css position to the background to make it slide to the left, is it possible? I can't modify the content when the panel is expanded because it doesn't receive an active class. Tried an "add class" in the JS for the content but didn't work.
https://codepen.io/darcyvoutt/pen/rhtfk
<div class="nav">
Left Panel
Right Panel
</div>
<div class="panel-left">
<div class="panel-content">
<div class="close"></div>
<div class="bottom">
Some content here.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
</div>
</div>
<div class="panel-right">
<div class="panel-content">
<div class="close"></div>
<p>Right Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<div class="content">
<h2>Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #84D5C5;
line-height: 1.5em;
font-size: 15px;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1, h2, h3 { margin-bottom: 0.5em; }
ul { margin: 30px 40px; }
li { margin: 5px 0; }
////////////////////////
// Mixins
////////////////////////
.transition(#property) {
-webkit-transition: #property;
transition: #property;
}
.boxStyle() {
background: #ffffff;
padding: 50px;
}
.panels() {
z-index: 10;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
}
.panelClose() {
#size: 15px;
#margin: 5px;
line-height: #size;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: #margin;
top: #margin;
height: #size;
width: #size;
content: "✖";
}
////////////////////////
// Panels & Reveal
////////////////////////
.panel {
#transition: all 1.5s ease-in-out;
padding: 20px;
&-content {
position: relative;
background: #efefef;
padding: 30px 50px;
overflow-y: auto;
height: 100%;
.close {
.panelClose();
&:before { .panelClose(); }
}
}
&-left {
.panels();
.transition(#transition);
left: -100%;
width: 45%;
&.expanded { left: 50px; }
}
&-right {
.panels();
.transition(#transition);
right: -100%;
width: 50%;
&.expanded { right: 0; }
}
}
.reveal {
&-left {
float: left;
}
&-right {
float: right;
}
}
////////////////////////
// Layout
////////////////////////
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
button {
padding: 4px 6px;
}
a {
font-weight: bold;
color: #222;
}
}
.content {
.boxStyle();
margin: 50px auto;
position: relative;
width: 90%;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
JS
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) { $(panel).removeClass('expanded'); }
});
});
}
revealPanel('.reveal-right','.panel-right', '.close');
revealPanel('.reveal-left','.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) { $('.panel-left').addClass('expanded'); }
if (e.keyCode == 82) { $('.panel-right').addClass('expanded'); }
});
});

You can add a class on the expand/close of the right panel that will:
fade the main content by changing the opacity CSS from 1 to 0.3 (for example)
move it to the right using the right from 0 to 50% (to match your right panel)
The transition rule in the .content CSS will animate the change.
(You only mention the right panel in your question, but it can be adapted for the left panel also).
See the working snippet:
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
$(".content").addClass('hidefor-'+panel.substr(1));
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-right');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-right');
}
});
});
}
revealPanel('.reveal-right','.panel-right', '.close');
revealPanel('.reveal-left','.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-right').addClass('expanded');
$(".content").addClass('hidefor-panel-right');
}
});
});
.content {
background: #ffffff;
padding: 50px;
margin: 50px auto;
position: relative;
width: 90%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity:1;
right:0;
}
.content.hidefor-panel-right {
opacity:0.3;
right: 50%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #84d5c5;
line-height: 1.5em;
font-size: 15px;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,
h2,
h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
background: #efefef;
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-right {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
right: -100%;
width: 50%;
}
.panel-right.expanded {
right: 0;
}
.reveal-left {
float: left;
}
.reveal-right {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
Left Panel
Right Panel
</div>
<div class="panel-left">
<div class="panel-content">
<div class="close"></div>
<div class="bottom">
Some content here.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
</div>
</div>
<div class="panel-right">
<div class="panel-content">
<div class="close"></div>
<p>Right Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<div class="content">
<h2>Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>

Hidden toggled div is interfering with non-toggled links

My page has toggled content that is preventing the other page content from being selectable or clickable. Is there a way to keep my general page layout the same, but still give users the ability to select the text and links within the "page-content" div?
I can add a positive z-index value to that "page-content" div, which would appear to solve the problem, but of course that covers up the toggled content, defeating the purpose.
function myFunction() {
var x = document.getElementById("toggleDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container {
width: 600px;
height: 350px;
border: 2px solid gray;
padding: 10px;
}
.page-content {
position: absolute;
width: inherit;
}
.toggle-wrapper {
width: 100%;
height: 100%;
border: 1px solid red;
position: relative;
}
.button-1 {
background-color: beige;
position: absolute;
right: 0;
bottom: 0;
}
#toggleDiv {
width: 95%;
height: 95%;
width: 600px;
height: 450px;
margin: 0 auto;
margin-top: 50px;
}
.link-box {
border: 1px solid blue;
width: 75%;
height: 225px;
margin-top: 100px;
margin-left: 12.5%;
box-sizing: border-box;
text-align: center;
background-color: beige;
}
.link-box a {
width: 40%;
margin-left: 7%;
border: 1px solid black;
text-align: center;
float: left;
height: 100px;
margin-bottom: 25px;
}
<div class="container">
<div class="page-content">
<p>The hidden toggled div is preventing you from selecting the text or clicking the link.</p>
<p>Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.</p>
LINK
</div>
<!--page-content-->
<div class="toggle-wrapper">
<button class="button-1" onclick="myFunction()">toggle</button>
<div id="toggleDIV" style="display: none;">
<div class="link-box">
<p>Toggle Content </p>
<a href="#">
<p>Link 1</p>
</a>
<a href="#">
<p>Link 2</p>
</a>
<button onclick="myFunction()">Cancel</button>
</div>
<!--link-box-->
</div>
<!--#toggleDiv-->
</div>
<!--toggle-wrapper-->
</div>
<!--container-->

I'd change the display of your popup a bit by removing the parent's block display, and setting the position of the inner link div to an absolute position so that it's removed from the flow of the document and doesn't block the elements behind it. Like this:
function myFunction() {
var x = document.getElementById("toggleDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container {
width: 600px;
height: 350px;
border: 2px solid gray;
padding: 10px;
position: relative;
}
.page-content {
position: absolute;
width: inherit;
}
.button-1 {
background-color: beige;
position: absolute;
right: 0;
bottom: 0;
}
#toggleDiv {
width: 600px;
height: 450px;
margin: 0 auto;
margin-top: 50px;
}
.link-box {
border: 1px solid blue;
width: 75%;
height: 225px;
box-sizing: border-box;
text-align: center;
background-color: beige;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.link-box a {
width: 40%;
margin-left: 7%;
border: 1px solid black;
text-align: center;
float: left;
height: 100px;
margin-bottom: 25px;
}
<div class="container">
<button class="button-1" onclick="myFunction()">toggle</button>
<div class="page-content">
<p>The hidden toggled div is preventing you from selecting the text or clicking the link.</p>
<p>Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.</p>
LINK
</div>
<!--page-content-->
<div class="toggle-wrapper">
<div id="toggleDIV" style="display: none;">
<div class="link-box">
<p>Toggle Content </p>
<a href="#">
<p>Link 1</p>
</a>
<a href="#">
<p>Link 2</p>
</a>
<button onclick="myFunction()">Cancel</button>
</div>
<!--link-box-->
</div>
<!--#toggleDiv-->
</div>
<!--toggle-wrapper-->
</div>
<!--container-->

make div appear over another div on scroll

Firstly I'm sorry, there's probably quite an easy way to do this but I'm an amateur with javascript, etc. which I expect you need. Here's what i want to do:
I have a basic 'parallax' website (something along the lines of this) but I'd like to add a footer which covers half of the bottom slide when you scroll down to it, with the content in the bottom slide staying put.
As in at the moment, the content in the fifth slide moves when you scroll down to the footer, but I want it to stop at the fifth slide, with the footer sliding over the top.
Any help will be greatly appreciated!
Sorry: here's the Lorem ipsumed code:
//I have no idea what javascript i should be using.
* {
margin: 0;
padding: 0;
min-height: 15px;
}
.page {
height: 100vh;
position: relative;
}
.page-title {
font-family: 'Quattrocento Sans';
font-size: 2.5em;
transform: translateY(100%);
margin-left: 50px;
margin-right: 50px;
}
.page-sub {
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
margin: 50px;
}
.page-para {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
line-height: 1.5;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50%;
position: relative;
}
.page-link {
text-decoration: none;
color: #F0C808;
}
.page-link:hover {
color: #F0C808;
font-weight: bold;
}
.link-box {
color: #F0C808;
background-color: #07A0C3;
border: 1px solid #07A0C3;
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
height: 3em;
width: 8em;
line-height: 3em;
bottom: 100px;
right: 150px;
position: absolute;
}
#page-one {
background: url('img/page-one.jpg') no-repeat fixed;
background-size: 100%;
}
.main-title {
font-family: 'Quattrocento Sans';
font-size: 3em;
text-align: center;
padding: auto;
align-items: center;
width: 35%;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-100%);
}
#page-two {
background: url(img/page-two.png) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-three {
background: url(img/page-three.jpg) no-repeat fixed;
background-size: 100%;
}
#page-four {
background: url(img/page-four.jpg) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-five {
background: url(img/page-five.jpg) no-repeat fixed;
background-size: 100%;
}
.page-five-para {
margin: 0;
}
.page-five-bold {
font-family: 'Coming Soon';
font-size: 1.2em;
margin: 0;
}
#footer {
background-color: #E2E2E2;
}
.foot {
margin: 0;
display: inline-block;
vertical-align: top;
width: 33%;
height: 50vh;
}
h5 {
font-family: 'Coming Soon';
font-size: 1.5em;
margin: 15px;
padding-left: 15px;
}
.right-foot-spacer {
height: 2.41em;
margin: 15px;
padding-left: 15px;
}
.foot-content {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
margin: 20px;
}
.foot-list {
list-style: none;
}
.foot-link {
color: black;
text-decoration: none;
}
blockquote {
margin: 0px;
margin-bottom: 15px;
}
.right-footer p {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans|Coming+Soon' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page" id="page-one">
<h1 class="main-title">Title</h1>
</div>
<div class="page" id="page-two">
<h2 class="page-title">Page two title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
</div>
<div class="page" id="page-three">
<h2 class="page-title">Page three title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.google.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page" id="page-four">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.bing.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page page-five" id="page-five">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">Lorem ipsum dolor</h4>
<div class="page-para">
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.</p>
<h6 class="page-five-bold">Lorem ipsum dolor</h6>
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer">
<div class="foot left-footer">
<h5>Lorem Ipsum</h5>
<p class="foot-content email">someone#example.com</p>
</div>
<div class="foot center-footer">
<h5>Footer</h5>
<ul class="foot-content">
<li class="foot-list">Google
</li>
<li class="foot-list">Bing
</li>
<li class="foot-list">Yahoo
</li>
</ul>
</div>
<div class="foot right-footer">
<div class="right-foot-spacer"></div>
<div class="foot-content quote">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<p>-Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>

If I've understood your question correctly, one way to achieve the effect you are looking for is by monitoring the getBoundingClientRect().top property of the final <div> and the getBoundingClientRect().bottom property of the penultimate <div>.
When the getBoundingClientRect().top property of the final <div> hits the top of the viewport, you can change the element's style rules to fix it in that position;
When the getBoundingClientRect().bottom property of the penultimate <div> comes back into view at the top of the viewport, you can unfix the final <div> so that it starts scrolling as normal again.
Example:
function fixPage5() {
var footer = document.getElementsByTagName('footer')[0];
var pages = document.getElementsByClassName('page');
if (pages[(pages.length - 1)].getBoundingClientRect().top < 1) {
pages[(pages.length - 1)].classList.add('fixed');
footer.style.marginTop = '424px';
}
if (pages[(pages.length - 2)].getBoundingClientRect().bottom > -1) {
footer.style.marginTop = '0';
pages[(pages.length - 1)].classList.remove('fixed');
}
}
window.addEventListener('scroll',fixPage5,false);
body {
margin: 0;
padding: 0;
}
.page {
position: relative;
width: 100%;
height: 400px;
padding: 12px;
font-size: 72px;
}
footer {
position: relative;
width: 100%;
z-index: 12;
height: 400px;
font-size: 72px;
color: rgb(255,255,255);
background-color: rgb(31,31,31);
}
.page:nth-of-type(odd) {
color: rgb(255,255,255);
background-color: rgb(127,127,127);
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: -12;
}
<div class="page">Page One</div>
<div class="page">Page Two</div>
<div class="page">Page Three</div>
<div class="page">Page Four</div>
<div class="page">Page Five</div>
<footer>Footer</footer>

Categories

Resources