В настоящее время я работаю над проектом, и у меня есть работающая отзывчивая навигационная панель, которую я хотел бы превратить в мобильное навигационное меню. Я читал какой-то другой пост, похожий на этот, но они либо не работали, либо использовали другой тип навигационной панели. Извините, если об этом уже спрашивали. Любая помощь приветствуется!
Редактировать: я бы хотел, чтобы моя навигационная панель выглядела так: здесь
* { box-sizing: border-box; }
body { background-color: #31353a;
color: #000033;
word-wrap: break-word;
font-family: Arial, Tahoma, "Sans Serif";
min-height: 100vh; }
header { background-color: #31353a;
text-align: center;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
text-shadow: 2px 2px 4px black;
box-shadow: 0 0 25px 0 black; }
header a { text-decoration: none;
transition: color 3s ease-out; }
header a:link { color: white; }
header a:visited { color: white; }
header a:hover { color: #00bfff;
text-shadow: 2px 2px 4px black, 0 0 25px black, 0 0 5px blue; }
h1 { margin-bottom: 0;
margin-top: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: 3em;
letter-spacing: 0.25em;
text-align: center; }
h2 { color: #1e20ff;
font-family: Georgia, "Times New Roman", serif;
text-shadow: 1px 1px 1px #777777; }
h3 { color: #000033;
font-family: Georgia, "Times New Roman", serif; }
h4 { color: #000033;
font-family: Georgia, "Times New Roman", serif;
border: 1px solid #000033;
box-shadow: 0 0 5px 0 #000033;
text-align: center;
font-size: 14px; }
h5 { color: white;
font-family: Georgia, "Times New Roman", serif;
font-style: body;
font-size: 14px; }
main { padding-top: 1px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
display: block;
min-height: 100vh;
overflow: auto; }
main ul { list-style-image: url(images/marker.png); }
section { padding-left: 2em;
padding-right: 2em; }
.wrapper { margin: 0px auto;
overflow: auto; }
.footer_1 { display: inline-block;
vertical-align: middle;
height: 150px;
width: 300px; }
.footer_1 a { color: white;
text-decoration: none; }
.footer_2 { display: inline-block;
vertical-align: middle;
height: 150px;
width: 300px; }
.footer_2 a { color: white;
text-decoration: none; }
.footer_2 a:link { color: white;
text-decoration: none; }
.footer_2 a:hover { color: #ff7f00;
text-decoration: none; }
footer { text-align: center;
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
font-size: 12px;
padding: 20px;
border-bottom-left-radius: 29px;
border-bottom-right-radius: 29px;
color: white;
background-color: #31353a; }
img { border-radius: 30px;
border: 1px solid #000033;
box-shadow: 0 0 25px 0 black;
height: 250px;
width: 100%; }
a { color: #0080ff; }
a:link { color: #0080ff;
text-decoration: none; }
a:visited { color: #ff7f00; }
a:active { color: #ff7f00; }
a:hover { color: #ff7f00; }
#logo { background-image: url(images/logo.png);
background-repeat: no-repeat;
background-size: 200px 200px;
display: block;
margin: 0 auto;
text-indent: -9999px;
background-position: left;
padding-bottom: 40px;
margin-left: 10px; }
#wrapper { min-height: 100vh; background: linear-gradient(to bottom, #b7deed 21%,#21b4e2 100%,#b7deed 100%);
margin: auto;
max-width: 90%;
box-shadow: 1px 1px 1px black;
border: 1px solid;
border-color: #000033;
border-radius: 30px; }
#home { height: 250px;
width: 100%;
background-image: url(images/home.jpg);
background-size: 100% 100%;
background-repeat: no-repeat }
#games { height: 250px;
width: 100%;
background-image: url(images/gaming.jpg);
background-size: 100% 100%;
background-repeat: no-repeat }
ul.topnav { list-style-type: none;
margin: 0;
padding: 0;
background-color: #31353a;
position: sticky;
top: 0;
width: 100%;
overflow: hidden; }
ul.topnav li { float: left; }
ul.topnav li a { display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; }
ul.topnav li a:hover:not(.active) { background-color: black;
color: white; }
ul.topnav li a.active { background-color: #00bfff;
color: white; }
ul.topnav li.right { float: right;
color: white; }
.topnav li { border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: none;
border-top: none;
margin-left: -0.5px;
margin-right: -0.5px; }
form { display: flex;
flex-flow: column nowrap; }
input, textarea { margin-bottom: .5em; }
@media screen and (max-width: 800px) {
#logo { background-position: left; }
section { grid-row: 1 / 5;
grid-column: auto; }
ul.topnav li.right,
ul.topnav li { float: none; }
.topnav li { border-bottom: 1px solid black;
border-top: 1px solid black;
border-left: none;
border-right: none;
margin-bottom: -0.5px;
margin-top: -0.5px; }
form { display: grid;
grid-gap: 0.6em; gap: 0.6em; }
}
@media screen and (min-width: 801px) {
section { grid-row: 1 / 5;
grid-column: auto; }
form { width: 80%;
display: grid;
grid-gap: 0.6em; gap: 0.6em;
grid-template-columns: 6em 0.8fr;
grid-template-rows: auto; }
input[type="submit"] { grid-column: 2 / 3; width: 6em; }
input[type="reset"] { grid-column: 4 / 5; width: 6em; }
}
<!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">
<link href="gamingparadise.css" rel="stylesheet">
<title>GamingParadise :: Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="index.html" id="logo">GamingParadise</a></h1>
</header>
<ul class="topnav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="emulators.html">Emulators</a></li>
<li class="right"><a href="request.html">Request</a></li>
</ul>
<div id="home">
</div>
<main>
<h2>Welcome to GamingParadise!</h2>
<p>We at GamingParadise would like to welcome you and thank you for stopping by! Our goals are to provide you with access to games and emulators for many different systems. To achieve this, we will be proving working links to our contents and their requirements. We do daily checks to see if any links are broken, but if by chance we missed one, please don't hesitate to contact us! We thrive to live up to our motto the best we can which is, "A Happy Customer is a Happy Worker".</p>
</main>
<footer>
<div class="wrapper">
<div class="footer_1">
<h5><u>Home</u></h5>
<a class="logo" href="index.html">GamingParadise<br>
<i>© 2020</i></a>
</div>
<div class="footer_2">
<h5><u>Contact</u></h5>
<a href="mailto:acrouse@student.centralgatech.edu">Email</a><br>
<a href="http://m.me/narutoshire">Facebook</a><br>
(424) 264-4887
</div>
</div>
</footer>
</div>
</body>
</html>