I alluded to this problem in my introduction message, but realized that was the wrong place to ask for help.
Is it appropriate to ask questions here about coding that is not in the Codecademy curriculum, or should I go somewhere else for this help?
Thanks
Absolutely, (so long as it’s not academic work/homework/exams etc) you can post any coding questions you might come across - feel free to post your code and the issue at hand and we can take a look 
I’m a retired old-timer who has built some rudimentary websites using wysiwyg apps.
I decided that I want to learn how the code works. I started with the Learn HTML and am partway through the Learn CSS lessons.
Concurrently, I’m trying to apply what I’ve learned to improve my website efforts.
I watched a few Youtube talks on building a responsive hamburger menu without Javascript. I’ve got the menu to work, but the CSS file won’t let me add any further content.
Here’s the HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="menu.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Marrowstone Island (marrowstoneisland.org)</title>
</head>
<body>
<header class="header">
<div align="center"><img id="logo" alt="MICA Logo"
src="images/MI_Sign_1.gif"><br>
</div>
<input class="menu-btn" id="menu-btn" type="checkbox"> <label
class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="membership.html">Membership</a></li>
<li><a href="documents.html">Documents</a></li>
<li><a href="cemetery.html">Cemetery</a></li>
<li><a href="islandresources.html">Resources</a></li>
<li><a href="feedback.html">Contact Us</a></li>
</ul>
</header>
<div>
<h1> Marrowstone Island Community Association (MICA)This</h1>
</div>
</body>
</html>
At the bottom of the file is my attempt to add content.
and here’s the CSS file:
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: Ivory;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
float: left;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .nav-icon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .nav-icon:before {
top: 5px;
}
.header .menu-icon .nav-icon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 400px;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top:0;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top:0;
}
/* 48em = 768px @ 16pt font */
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: left;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
Looking forward to learning with someone’s help.
Thanks
BL
Hi, there!
May I ask what it is you are attempting to change or modify?
Thanks for the response.
I got HTML and CSS coding from a YouTube tutorial on building a responsive hamburger menu with only CSS (no Javascript).
I put that code as shown in my request for help. may files are named menu.html and menu.css. When I run the files in my browser, the menu works as I wish.
At the bottom of the body in menu.html I added the “Marrowstone Island Community Association (MICA)” line because I want to develop a new website for the Association.
I can’t seem to figure out what to do in the CSS stylesheet to get any content (Marrowstone Island …) to display.
I’m really new at coding from scratch, but I’m really enjoying working on this.
I’ll certainly continue my lessons on Codecademy, but I want to do this project concurrently.
Any help would be greatly appreciated.
Sorry if I put myself in, but the problem here is that your <\h1> is displayed but behind the header you can check that using the developer tool accessible via ctr + shift + i in your browser:
to fix that I suggest you to use some div for dividing the header from the rest of your future page, hope this will help you, bye.
Ah, okay. I understand now.
So, when an element is set to fixed, it is removed from the flow of the document. The document acts as if the element is not there, and the rest of the elements shift. In this case, the only elements you have are the <header> and <h1>. The <header> is fixed, so the <h1> shifts up behind the <header>. There are a few ways this can be fixed.
First, you could use sticky with top: 0 on the <header> instead of fixed. Second, you could give the element directly under your <header> a margin/padding equal to (or greater dependent on desired position) of the header’s height to shift everything down. Lastly, you could wrap all of your content in a <div> and give it a position of relative with a top value equal to (or again greater dependent on desired position) the header’s height.
These are all common methods used when creating a <header> that scrolls.
I hope this helps!
I enjoy working with CSS, so if you have any further questions I would be more than happy to provide some assistance.
Thanks for the response
I can see that the text is hidden by the header and am working on solutions to fix that
Thanks so much
I can see that these options are a solution and I’m working with all three to find the one I like best. It’s making a great learning experience.
I show you the results when I settle on one.
