I am in the process of developing a website for my school project and everything has been going smoothly so far. However, I encountered an issue when trying to open the site on different web browsers. The off-screen menu that I created using HTML/CSS seems to be malfunctioning on some browsers. Sometimes it appears on the screen but won't close, and other times the button disappears entirely, making the menu inaccessible. How can I ensure that it works consistently across all browsers? It's worth noting that I observed this error in Chrome, Internet Explorer, and Firefox, even though it functions correctly on my computer on all three browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Resources</title>
<link rel="stylesheet" type="text/css" href="cisco.css" media="screen">
<link rel="stylesheet" type="text/css" href="template.css" media="screen">
</head>
<body>
<div class="navigation">
<figure>
<img src="menubanner.jpg" alt="menu banner" />
</figure>
<ul>
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item"><a href="htmlcss.html">HTML & CSS</a></li>
<li class="nav-item"><a href="ciscohome.html">Cisco</a></li>
</ul>
</div>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="site-wrap">
<h1>Cisco Router and Switch Commands</h1>
<h2></h2>
<br>
<br>
<br>
<br>
</div>
</body>
</html>
Here is the CSS code:
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles menu color */
list-style: none;
background: #333;
}
figure {
width: 200px;
text-align: center;
margin: 20px 0;
}
figure img {
width: 100px;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
border-top: 1px solid #111;
border-bottom: 1px solid #000;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
background: white;
color: rgb(123,193,149);
}
/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
background-color: white; /* Needs a background or else the nav will show through */
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
/* non-critical apperance styles */
padding: 4em;
background-image: url(b1.gif);
background-size: contain;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
display: block;
height: 0;
width: 0;
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
left: 15px; top: 15px;
z-index: 2;
/* Menu Button*/
/* non-critical apperance styles */
height: 75px;
width: 125px;
cursor: pointer;
background-image: url("menubutton.jpg");
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
body {
/* Without this, the body has excess horizontal scroll when the menu is open */
overflow-x: hidden;
}
/* Additional non-critical styles */
h1, h2, h3, h4, h5, h6, p {
max-width: 600px;
margin: 0 auto 1em;
}
code {
padding: 2px;
background: #ddd;
}
/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }
@media only screen
and (min-width : 1224px) {
/* Styles */
.nav-trigger,label {display:none;}
.nav-item,figure {width:20%}
.site-wrap {min-width:80%;float:right;}
figure img {
width: 150px;
}
}