Div element pushed out of the page when resizing

Div element pushed out of the page when resizing - javascript

I'm trying to have my video and its caption at the center of my page and my logo in the upper left corner. This works fine until resizing, when the logo is pushed out of the page - it is as if there was an element in the middle that overrides my logo element. I have tried to troubleshoot which element does this: I of course suspect that it is the video container, and I have tried many ways to change its settings with no success so far (absolute with smaller width, float left etc.).
I'm total newbie with CSS and would appreciate any help! I'm also aware that using absolute positions is not a good practice - it was now just something to get things working to some extent.
My code:
html:
<!DOCTYPE html>
<html>
<head>
<title>Broadcaster</title>
<meta charset="UTF-8" />
<link href="/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alegreya:wght#400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yatra+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Vollkorn:wght#400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=BioRhyme&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/2.0.1/tf.min.js"></script>
</head>
<body>
<div class="video-container">
<video playsinline autoplay muted width="400" height="400" id="webcam"></video>
<p id="caption"></p>
</div>
<input type="button" onclick="location.href='archive.html';" value="Archive" />
<input type="submit" onclick="location.href='about.html';" value="About"/>
<div class="logo">
<div id="icon">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="logotext"></div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/broadcast.js"></script>
</body>
</html>
styles.css (this covers content on several html pages):
html,
html {
height: 100%;
}
* {
box-sizing: border-box;
}
body {
background-color: #FFE4E1;
background: linear-gradient(#FFE4E1, thistle);
margin: 0;
height: 100%;
width:100%;
background-attachment: fixed;
}
header {
text-align: center;
}
main {
min-height: 80vh;
width: 10%;
}
h1 {
font-family: 'Messapia-Bold', serif;
position: absolute;
top: 5%;
left: 50%;
transform: translateY(-5%);
transform: translateX(-50%);
}
.video-container {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
.video-container video {
width: 40%;
height: 40%;
min-height: 224px;
max-height: 600px;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
display: block;
}
.video-container #caption {
display: block;
position: absolute;
top: 76%;
left: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
font-family: 'Messapia-Bold', serif;
font-size: small;
}
input[type=button] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 50%;
right:3%;
text-align: center;
}
input[type=submit] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 50%;
left:3%;
text-align: center;
}
input[type=back] {
font-family: 'Messapia-Bold', serif;
font-size: small;
background-color: black;
border: none;
color: white;
padding: 8px 8px;
text-decoration: none;
cursor: pointer;
max-width: 90px;
width: 100%;
position: absolute;
top: 19%;
left:3%;
text-align: center;
}
.text {
background-color: white;
position: absolute;
top: 30%;
display: flex;
flex-wrap: wrap;
font-family: 'Vollkorn', serif;
}
.text p{
text-align: center;
padding: 0 26%;
font-family: 'Vollkorn', serif;
font-size: x-large;
}
#font-face {
font-family: "Messapia-Bold";
src: url("font/Messapia-Bold.woff2") format ("woff2"),
src: url("font/Messapia-Bold.woff") format ("woff");
}
.logo{
min-width: 11%;
min-height: 11%;
margin:1em 0em;
position: absolute;
top: 1%;
left: 1%;
display: block;
overflow: visible;
/*transform: translate(-50%, -50%);*/
}
#icon{
position: absolute;
min-width:100%;
min-height:100%;
margin:1em 0em;
overflow: visible;
}
#icon > *{
display: inline-block;
position: absolute;
overflow: visible;
}
#icon div span{
display:none;
}
#logotext{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_transparent.svg) ;
background-size: cover;
background-position: right;
overflow: visible;
}
#box1{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_upperbox.svg) ;
background-size: cover;
background-position: right;
animation-name: stretch1;
animation-timing-function: ease-out;
animation-duration: 2s;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
transform-origin: 97% 50%;
overflow: visible;
}
#box2{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_midbox.svg) ;
background-size: cover;
background-position: right;
overflow: visible;
}
#box3{
min-width:100%;
min-height:100%;
background-image:url(/logo/final_lowestbox.svg) ;
background-size: cover;
background-position: right;
animation-name: stretch3;
animation-duration: 1.3s;
animation-timing-function: ease-out;
animation-delay: 4s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
transform-origin: 97% 50%;
overflow: visible;
}
#keyframes stretch1 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
#keyframes stretch2 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
#keyframes stretch3 {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.row {
position: absolute;
top: 30%;
display: flex;
flex-wrap: wrap;
padding: 0 6px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 6px;
}
.column img {
opacity: 1;
margin-top: 12px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}

Related

Is Any Of My CSS Or Javascript Crashing The Mobile Version of Google Chrome?

I'm a beginner in coding with HTML, CSS, and Javascript, and have created a simple website with a responsive menu. It works well on every browser except for the mobile (ios) version of Google Chrome. What's happening is that after viewing a few pages if I try to click on a link and navigate to another page it will constantly show that it's loading that page and nothing happens, it stays on the current page. After that, it's as if the site freezes and I have trouble navigating to any previous page I've viewed.
I've seen that some people are having difficulty with the mobile version of Google Chrome based upon certain code (CSS and/or Javascript) and wondered if that is what may be causing my website not to open properly on it. If anyone has any knowledge as to what may be causing my website not to load properly I'd appreciate you sharing your knowledge with me. Thank you.
HTML/MENU:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<title>MORIKOBOSHI・</title>
</head>
<body>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>
Javascript:
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Googleカスタム検索" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="検索" style="padding-left: 5px; top: 153px; height: 25px; width: 36px; display: inline-flex; justify-content: center; font-size: 10.5px;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">
</form>
</div>
<script type = "text/javascript"> document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
return false;
} </script>
<script>
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
　for (var i = 0; i < elements.length; i++) {
　　elements[i].addEventListener('click', closeHamp, false);
}
</script>
CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}

I figured out the issue with the mobile version of Google Chrome, and it had nothing to do with any of the code I'm using. I have yet to attach an SSL certificate to my website and have yet to make it searchable on Google, Yahoo, Bing, and other search engines. Because of this, Google is (as it rightly should at this point) deeming my website to be unsafe. After changing the settings on the mobile version of Google Chrome so that all websites (not just ones deemed safe by Google) could be viewable, I can now view my website without any issues.
Once I have an SSL certificate attached to my website and made it searchable on search engines I should be good to go on any browser without any issues and should have no need to change browser settings.

Using Javascript To Toggle CSS - Disabling The Scroll Behind the Hamburger Menu

Below is both the HTML and CSS I'm using to create a website. I have no previous
experience with Javascript, so I'm unfamiliar with how to use it but would like to
be able to use Javascript to toggle some CSS so that the background doesn't scroll
when my hamburger menu is open. I'm stuck, but if anyone has any advice to give me
it'd be much appreciated.
Please ignore the Javascript above as this applies to the search bar I intend to use.
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;" />
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;" />
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br>
<h1 style="text-align: center; font-size: 40px;">東京都</h1>
<br>
<p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br>
<div class="image">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
</div>
</div>
<br><br>
<footer class="site-footer" style="font-size: 12px;"> | English</footer>
</div>
<style>
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
`enter code here` margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>

Add an onchange event on the input you used to toggle the hamburger menu.
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
`enter code here` margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
<body style="background-color: white;">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;" />
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;" />
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br>
<h1 style="text-align: center; font-size: 40px;">東京都</h1>
<br>
<p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br>
<div class="image">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
</div>
</div>
<br><br>
<footer class="site-footer" style="font-size: 12px;"> | English</footer>
</div>

my #media CSS selector isn't working, When I change the screen size, nothing happens

I am trying to make a burger menu button appear in the right hand corner of the screen when it gets to a certain size (960px) but when I minimize the window nothing shows up..
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll website</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
</html>
style.css : (if you comment out 'top: -1000px' in the media query, the menu screen will drop down)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display:flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius:4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
}
Please help, I feel like I've tried everything and nothing works.

The reason why it does not appear
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
no information to appear here.
You can add an icon or a text inside, or you can fill in the spans.
Remember that the main color of the texts is black, you may not see it because you are black on your background. You will need to color it.

You are not actually doing anything as of yet. Add a navbar, then add a script. I used your classlist to toggle in this scenario:
document.getElementById('mobile-menu').addEventListener("click", function(e) {
this.classList.toggle('open');
const navbar = document.querySelector('.navbar__menu');
navbar.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu span:nth-child(1) {
top: 0px;
}
#mobile-menu span:nth-child(2),
#mobile-menu span:nth-child(3) {
top: 18px;
}
#mobile-menu span:nth-child(4) {
top: 36px;
}
#mobile-menu.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#mobile-menu {
width: 60px;
height: 45px;
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
-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;
}
#mobile-menu span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#mobile-menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#mobile-menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#mobile-menu.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll website</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 998;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb845, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #9518fc;
transition: all 0.3s ease;
}
#media (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
#navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff
}
.navbar__item {
width: 100%
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.buttom {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu span:nth-child(1) {
top: 0px;
}
#mobile-menu span:nth-child(2),
#mobile-menu span:nth-child(3) {
top: 18px;
}
#mobile-menu span:nth-child(4) {
top: 36px;
}
#mobile-menu.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#mobile-menu {
width: 60px;
height: 45px;
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
-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;
}
#mobile-menu span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#mobile-menu.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#mobile-menu.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#mobile-menu.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
}
</style>
</head>
<body>
<!-- Navbar section -->
<nav class="navbar">
<div class="navbar__container">
COLOR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="nav__item">
Home
</li>
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
</body>
<script>
document.getElementById('mobile-menu').addEventListener("click", function(e) {
this.classList.toggle('open');
const navbar = document.querySelector('.navbar__menu');
navbar.classList.toggle('active');
});
</script>
</html>

How do I use a checkbox within my WordPress website?

I have made a toggle switch and I would like to integrate it into my site but I am unsure how to do this. I am using the plugin bbPress on my WordPress site and would like for the user of the website to be able to click the toggle switch when leaving a comment and then for their input to be displayed on their comment.
Here is the HTML for the toggle switch:
`
<!-- ____[TOGGLE BUTTON]____ -->
<div class="toggle">
<!-- ____[OUTER BOX WITH BORDER LINE]____ -->
<div class="toggle__box">
<!-- ____[INPUT WITHOUT VISIBILITY LINKED WITH LABEL]____ -->
<input type="checkbox" id="toggle-check">
<!-- ____[TOGGLE LABEL FOR INPUT]____ -->
<label for="toggle-check" class="toggle__label">
<!-- ____[TOGGLE THUMB ICON]____ -->
<div class="toggle__thumb">
<img src= <?php get_image_for_slider(); ?> >
</div>
<!-- ____[TEXT OF TOGGLE]____ -->
<div class="toggle__text--green">BULLISH</div>
<div class="toggle__text--red">BEARISH</div>
</label>
</div>
</div>
`
and then here is the CSS for this button:
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}`
Is there some way to link a variable to this switch/checkbox and so when the user clicks it I can use that to display something to the screen - as mentioned above? I have tried using isset($_POST["name"] but that didn't seem to work. I have also seen that maybe adding an event listener in JavaScript could work but I am not sure how to code in Java so any help would be great!
Many Thanks

You should be able to solve this using JS. Just insert this JS and then put what every you want in the function.
document.getElementById("toggle-check").addEventListener("click", funct1);
function funct1() {
/* you can put what ever function or thing you want to happen when you click the box here!*/
document.getElementById('p').innerHTML = "When you click the box this text will show up!";
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}
`
<input type="checkbox" class="toggle" id="toggle-check">
<p id="p"></p>

SVG/CSS animated icon not working

I'm trying to implement an animated menu icon I found on codepen by Balaj Marius. The design is here.
When I try it in my project (or even independently in separate files), it doesn't work. The icon appears, but the javascript doesn't seem to be running. I'm assuming it's an obvious answer, but it's currently beating me. Any ideas on how to get it up and running?
Here is how I have it:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/javascript" href="js/main.js">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Tah-da!<span>Now scroll back up.</span></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
css:
body {
background: #02021a url("https://raw.githubusercontent.com/balajmarius/hamburger-animation/master/assets/img/bg.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
#-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
#keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
js:
$(document).ready(function(){
console.log("ready");
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
});

Develop Reference

JavaScript is the programming language of the Web.

Div element pushed out of the page when resizing - javascript

Related

Is Any Of My CSS Or Javascript Crashing The Mobile Version of Google Chrome?

Using Javascript To Toggle CSS - Disabling The Scroll Behind the Hamburger Menu

my #media CSS selector isn't working, When I change the screen size, nothing happens

How do I use a checkbox within my WordPress website?

SVG/CSS animated icon not working

Categories

Resources