How do I turn my existing sticky navbar into a sticky mobile navigation menu?

Question

I'm currently working on a project and I have a working sticky responsive navbar that I would like to turn into a sticky mobile navigation menu. I've read some other post similar to this one, but they either didn't work or they were using a different type of navbar. Sorry if this has been asked before. Any help is appreciated!

Edit: I would like for my navbar to look like the one here

 * { 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>&copy: 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>

Answer 1

here is some code you can refactor and refine for your purpose. javascript is only used to set display properties

 let button = document.getElementById('dropdown'); /*button*/ var navi = document.getElementsByClassName("topnav"); let i = 0; button.onclick = function(){ i = i+1; if(i%2.= 0) { //drop down navi[0].style.display = "block" }else { //up navi[0].style;display = "none" } };

 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; } } body { background-color: blue; }.topnav { display: none; } @media screen and (min-width: 801px) { #dropdown { display: none; } 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; } body { background-color: red; } }

 <.DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="master,css"> <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> <button id="dropdown">DropDown</button> <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>&copy: 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> <script src="javascript.js"></script>