A newbie's problem with making a navigation dropdown

HTML & CSS
1

I am Wilfred Thompson and I am a newbie when it comes to web design. My problem is that I am having a difficult time understanding CSS, HTML, and the HTML element Script which is why my navigation dropdown is a broken mess. My aim is to create a navigation dropdown that starts from a small button with three lines that will ultimately drop down the menus Home, Gallery, About, and Contact vertically and then the close symbol will also appear which will hide the menus if clicked. I want the three lined button dropdown navigation to appear only after reaching screen width 1044 pixels and below because I am fine with the menus being shown and in-line with each other side by side from width 1045 pixels and above. How can I fix this? Please help.

My HTML file and CSS file for the website I am talking about is below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Wilfred Thompson</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/styles.css">

    <!--[if it IE 9]>
    <script src="js/html5.js"></script>
    <![endif]-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
  </head>

<body class="FirstPage">

		<header>
			<img src="images/Website_Logo.jpg" alt="TheLogo">
			<h1>Wilfred Thompson</h1>
			<nav class="navdrop" id="navdrop">
				<a href="javascript:void(0)" class="closeit" onclick="closeNav()">&times;</a>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="portfolio.html">Gallery</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</nav>
			<span id="open" class="open" onclick="openNav()">&#9776</span>
		</header>
		
		<script>
			function openNav() {
				document.getElementById("open").style.display = "none";
				document.getElementById("navdrop").style.width = "100";
			}
			function closeNav() {
				document.getElementById("navdrop").style.width = "0";
				document.getElementById("open").style.display = "block";
			}
		</script>

		<main>
			
			<section class="new">

			<div class="Second">
				<p class="newtext-start">Make The Most Of Your Dreams</p>

				<p class="newtext">Dreams are what life is supposed to be</p>

			</div>

			</section>

		<div class="height"> &nbsp;</div>

</main>
		<footer>
			<p>&copy; Wilfred Thompson<p>
		</footer>
	
	<!-- </div> -->

</body>

</html>

CSS

/***********************
 http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* end meyer reset */


/* add clearfix for floats from http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

/* add default box model - when you see the asterick it applies these properties and values to ALL selectors  */
* {
  box-sizing: border-box;
}

/* add image width for responsive images */

img {
  max-width: 100%;
}
/* YOU MUST INCLUDE LINES 1-81 in your style sheet */
/***********************
Begin your style rules - try to place them in the order that they appear on the page - alternatively come up with a predictable strategy about the order that they appear
*************************/
body {
	font-size: 16px;
	line-height: 1;
	font-family: Arial, sans-serif;
	background-color: white;
}

.FirstPage {
	background-color: green;
}

header {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  background-color: #898989;
  padding: 1em;
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 636px) {
header {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  background-color: #898989;
  padding: .1em;
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
}
}

header img {
	text-align: center;
	width: 90px;
	padding: .5em;
}

@media screen and (max-width: 1094px) {
header img {
	text-align: center;
	width: 70px;
	padding: .5em;
}
}

@media screen and (max-width: 643px) {
header img {
	text-align: center;
	width: 70px;
	padding: .5em;
}
}

@media screen and (max-width: 452px) {
header img {
	text-align: center;
	width: 60px;
	padding: .5em;
}
}

header h1 {
 	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 30px;
	padding: 1em;
	padding-top: 1em;
	padding-bottom: 0.5em;
	line-height: 1.2;
	color: black;
}

@media screen and (max-width: 1094px) {
header h1 {
 	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 25px;
	padding: 1em;
	padding-top: 0.9em;
	padding-bottom: 0.5em;
	line-height: 1.2;
	color: black;
}
}

@media screen and (max-width: 643px) {
header h1 {
 	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 17px;
	padding: 1em;
	padding-top: 2em;
	padding-bottom: 0.5em;
	line-height: 1.2;
	color: black;
}
}

@media screen and (max-width: 452px) {
header h1 {
 	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 15px;
	padding: 1em;
	padding-top: 1.4em;
	padding-bottom: 0.5em;
	line-height: 1.2;
	color: black;
}
}

h2 {
	background-color: #b6b3b3;
	padding: 0.5em;
	padding-left: 2em;
	font-family: Helvetica, sans-serif;
	font-size: 2em;
	color: black;
}

nav {
 	padding: 1.3em 1em 1em 45em;
 	display: flex;
}

@media screen and (max-width: 1738px) {
nav {
 	padding: 1.3em 1em 1em 27em;
}
}

@media screen and (max-width: 1450px) {
nav {
 	padding: 1.3em 1em 1em 15em;
}
}

@media screen and (max-width: 1258px) {
nav {
 	padding: 1.3em 1em 1em 10em;
}
}

@media screen and (max-width: 1178px) {
nav {
 	padding: 1.3em 1em 1em 13em;
}
}

@media screen and (max-width: 1136px) {
nav {
 	padding: 1.3em 1em 1em 11em;
}
}

@media screen and (max-width: 1104px) {
nav {
 	padding: 1.3em 1em 1em 9em;
}
}

@media screen and (max-width: 1094px) {
nav {
 	padding: .9em 1em 1em 12em;
}
}

@media screen and (max-width: 1074px) {
nav {
 	padding: .9em 1em 1em 11em;
}
}

@media screen and (max-width: 1063px) {
nav {
 	padding: .9em 1em 1em 8em;
}
}

@media screen and (max-width: 1052px) {
nav {
 	padding: .9em 1em 1em 11em;
}
}

@media screen and (max-width: 1044px) { 
nav {
 	padding: .9em 12em 1em 1em;
	overflow-x: hidden;
	z-index: 1;
	position: fixed;
	transition: 0.5s;
}
}

@media screen and (max-width: 729px) {
nav {
 	padding: .9em 1em 1em 1em;
	overflow-x: hidden;
	z-index: 1;
	position: fixed;
	transition: 0.5s;
}
}

@media screen and (max-width: 643px) {
nav {
 	padding: 1em .5em 1em 1em;
	overflow-x: hidden;
	z-index: 1;
	position: fixed;
	transition: 0.5s;
}
}

@media screen and (max-width: 636px) {
nav {
 	padding: 1em .5em 1em 1em;
 	margin: 0 auto;
	overflow-x: hidden;
	z-index: 1;
	position: fixed;
	transition: 0.5s;
}
}

nav ul {
	text-align: right;
	padding-top: .7em;
}

@media screen and (max-width: 636px) {
nav ul {
	text-align: right;
	padding-top: .1em;
}
}

nav ul li {
  display: inline-block;
	padding: .3em .3em .3em .3em;
	padding-left: 1.7em;
	padding-right: 1.7em;
	letter-spacing: .1em;
}

@media screen and (max-width: 1178px) {
nav ul li {
  display: inline-block;
	padding: .3em .3em .3em .3em;
	padding-left: 1em;
	padding-right: 1em;
	letter-spacing: .1em;
}
}

@media screen and (max-width: 636px) {
nav ul li {
	display: block;
	padding: 1.1em .3em 1.1em .3em;
	padding-left: 9.5em;
	padding-right: 9.5em;
	letter-spacing: .1em;
	text-align: center;
	border-bottom: 2px solid #c1c1c1;
	background-color: #9f9f9f;
}
}

@media screen and (max-width: 540px) {
nav ul li {
	display: block;
	padding: 1.1em .3em 1.1em .3em;
	padding-left: 7.4em;
	padding-right: 7.4em;
	letter-spacing: .1em;
	text-align: center;
	border-bottom: 2px solid #c1c1c1;
	background-color: #9f9f9f;
}
}

@media screen and (max-width: 480px) {
nav ul li {
	display: block;
	padding: 1.1em .3em 1.1em .3em;
	padding-left: 5.7em;
	padding-right:5.7em;
	letter-spacing: .1em;
	text-align: center;
	border-bottom: 2px solid #c1c1c1;
	background-color: #9f9f9f;
}
}

@media screen and (max-width: 370px) {
nav ul li {
	display: block;
	padding: 1.1em .3em 1.1em .3em;
	padding-left: 4.7em;
	padding-right: 4.7em;
	letter-spacing: .1em;
	text-align: center;
	border-bottom: 2px solid #c1c1c1;
	background-color: #9f9f9f;
}
}

@media screen and (max-width: 346px) {
nav ul li {
	display: block;
	padding: 1.1em .3em 1.1em .3em;
	padding-left: 2.5em;
	padding-right: 2.5em;
	letter-spacing: .1em;
	text-align: center;
	border-bottom: 2px solid #c1c1c1;
	background-color: #9f9f9f;
}
}

@media screen and (max-width: 290px) {
nav ul li {
	display: block;
	padding: 1.1em .3em 1.1em .3em;
	padding-left: 1.5em;
	padding-right: 1.5em;
	letter-spacing: .1em;
	text-align: center;
	border-bottom: 2px solid #c1c1c1;
	background-color: #9f9f9f;
}
}

@media screen and (max-width: 260px) {
nav ul li {
	display: block;
	padding: 1.1em .3em 1.1em .3em;
	padding-left: .2em;
	padding-right: .2em;
	letter-spacing: .1em;
	text-align: center;
	border-bottom: 2px solid #c1c1c1;
	background-color: #9f9f9f;
}
}

nav a {
	text-decoration: none;
	color: white;
	clear: left;
	font-size: 22px;
/*	display: block;*/
	text-decoration: none;
	transition: 0.3s;
}

@media screen and (max-width: 636px) {
nav a {
	text-decoration: none;
	color: black;
	clear: left;
	font-size: 22px;
/*	display: block;*/
	text-decoration: none;
	transition: 0.3s;
}
}

nav a:link{
	color: white;
	padding: .5em 1em;
	clear: left;
	color: white;
	font-size: 22px;
/*	display: block;*/
	text-decoration: none;
	transition: 0.3s;
}

@media screen and (max-width: 636px) {
nav a:link{
	color: black;
	padding: .5em 1em;
	clear: left;
	font-size: 22px;
/*	display: block;*/
	text-decoration: none;
	transition: 0.3s;
}
}

nav a:visited{
	color: white;
	padding: .5em 1em;
	clear: left;
	color: white;
	font-size: 22px;
/*	display: block;*/
	text-decoration: none;
	transition: 0.3s;
}

@media screen and (max-width: 636px) {
nav a:visited{
	color: black;
	padding: .5em 1em;
	clear: left;
	color: white;
	font-size: 22px;
/*	display: block;*/
	text-decoration: none;
	transition: 0.3s;
}
}

nav a:hover{
	color: black;
	text-decoration: none;
	padding: .5em 1em;
	background-color: #c6c6c6;
	clear: left;
	font-size: 22px;
/*	display: block;*/
	text-decoration: none;
	transition: 0.3s;
}

nav a:active{
	color: black;
	padding: .5em 1em;
	background-color: white;
	clear: left;
	font-size: 22px;
/*	display: block;*/
	text-decoration: none;
	transition: 0.3s;
}

.navdrop a:not(:first-child):hover {
	background-color: #f7941d;
}

.open {
	color: white;
	font-size: 40px;
	float: left;
	padding: .1em .1em .1em .1em;
	display: block;
	cursor: pointer;
}

@media screen and (min-width: 1045px) {
.open {
	color: white;
	font-size: 40px;
	float: left;
	padding: .1em .1em .1em .1em;
	display: none;
	cursor: pointer;
}
}

/*.navdrop {
	width: 0;
	overflow-x: hidden;
	height: 100vh;
	z-index: 1;
	position: fixed;
	background-color: rgba(34,65,93,0.9);
	transition: 0.5s;
	display: block;
}

.navdrop a {
	clear: left;
	color: white;
	font-size: 22px;
	display: block;
	text-decoration: none;
	padding: 1em 0;
	transition: 0.3s;
}*/

.closeit {
	float: left;
	margin: 1em 0 0 1em;
}

@media screen and (min-width: 1045px) {
.closeit {
	float: left;
	margin: 1em 0 0 1em;
	display: none;
}
}

main {}

section {}

footer {
	padding: 1em;
	font-size: 16px;
	font-family: Arial, sans-serif;
	width: 100%;
  background-color: #282a28;
  padding: 1.5em;
  color: white;
  font-weight: bold;
  text-align: center;
}

.height {
	height: 1400px;
}
4

Hi there @wilguyf10xc and welcome to the forums

100 what? Should that be 100% ? I don’t know if this is your only issue.

5

Thanks! I was able to update my website a bit.

6

You should toggle a css class rather than directly writing styles in the html as they will be difficult to over-ride with media queries. This will keep control in the stylesheet and you can hide and show the nav and hamburger using the css class.

Here’s an example that i have quickly adapted to be close to yours to show how to manage things.

It should serve as a guide in how to toggle and show the required elements and to move things around. It’s ripe for improvement as I have only put the basics in place.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.