menuToggle CSS Problems - will not display or function - css

Question

Two things:
As of now the menu hides in the top with a top-margin:-100px;and should display below the banner once clicked but it wont know what I seem to try. The menu is in the code/css but can not be displayed, and I am no sure why. I am trying to hide it in the top-margin and have it only display when the user requests it. I hope this helps.
Multi color type in my css logo? There has got to be a cleaner way of pulling off that visual. Seems wonky to me.
Why wont my menu toggle work? The numbers seem fine? I have been through this code all day, I have no idea and my eyes hurt.
Trying to pull this header off, if I had it my way the nav would simply be in the header, and would display the mobile-icon only for mobile or when the browser window gets collapsed from the side.
I know my code is not very pretty, I am learning and appreciate any help that can be provided.
Thank you, - Phil
http://jsfiddle.net/t6oe93fu/1/
/------------------CSS Start--------------------/
#charset "UTF-8";
/* CSS Document */
/*--------PPGD CSS----------*/
<style type="text/css">
body{
background: #fff;
margin: 140px 0px 0px 0px;
font-family: 'Open Sans', sans-serif;
}
/*--------HEADER Start----------*/
div#topdiv {
position:fixed;
top:0px;
left:0px;
width:100%;
color:#0F0;
background:#FFF;
opacity:0.9;
padding:0px 0px 0px 0px;
z-index:99;
height:58px;
webkit-box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
moz-box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
box-shadow: 0px 0px 5px 0px rgba(138,136,138,1);
z-index:99;
}
div#menucontainer {
height:58px;
float:right;
margin-right: 10px;
padding: 0px;
display:block;
}
div#container {
max-width: 942px;
min-width:320px;
align:center;
margin: 0 auto;
padding: 0px;
position: relative;
height:0px;
display:block;
margin-left: auto;
margin-right: auto;
}
/*--------LOGO Start----------*/
div#brand {
float:left;
display:block;
margin-top:0px;
margin-left:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
line-height: 90%;
color:#F60;
z-index:99;
}
div#brand1 {
float:left;
display:block;
margin-left:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
line-height: 90%;
color:#F60;
}
div#brand2 {
float:left;
display:block;
margin-top:10px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
color:#666;
line-height: 90%;
}
div#brand3 {
float:left;
display:block;
margin-top:7px;
margin-left:-161px;
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight:800;
color:#666;
line-height: 90%;
}
/*--------LOGO End----------*/
/*--------MENU Start----------*/
* {padding: 0; margin: 0; }
body { font-family: Open Sans; }
a { text-decoration: none; color:#666; }
li { list-style-type: none; }
nav {
text-align: center;
float:right;
padding: 15px;
display:block;
border-bottom: 1px;
height:19px;
margin-top:20px;
margin-right:10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight:400;
letter-spacing: 0.125em;
color:#666;
line-height: 100%;
}
nav:hover {
float:right;
display:block;
height:19px;
margin-top:20px;
margin-right:10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight:400;
letter-spacing: 0.125em;
color:#f60;
cursor:pointer;
line-height: 100%;
border-bottom-style: solid;
border-bottom-color: #f60;
}
nope {
position:absolute;
width: 260px;
height: 100%;
background: none;
}
div#SAVE{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px #F60;
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}
}
/*--------MENU End----------*/
/*--------HEADER End----------*/
/*--------FOOTER Start----------*/
div#footer {
height: 30px;
bottom:0px;
width: 100%;
background: #666;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
font-weight:300;
webkit-box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
moz-box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
box-shadow: 0px -1px 5px 0px rgba(138,136,138,1);
color: #FFF;
}
/*--------FOOTER End----------*/
* { padding: 0; margin: 0; }
body { font-family: 'Open Sans' sans-serif; }
a { text-decoration: none; color: #666; font-size: 14px; }
li { list-style-type: none; }
header {
width: 100%;
height: 50px;
margin: auto;
border-bottom: 1px solid #EEE;
background: #FFF;
z-index: 99;
}
.container {
max-width: 942px;
min-width:320px;
align:center;
margin: 0 auto;
padding: 0px;
position: relative;
height:0px;
display:block;
margin-left: auto;
margin-right: auto;
}
#brnad {
float: left;
line-height: 50px;
font-size: 30px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #F60;
}
nav { width: 100%; text-align: center; }
nav ul { line-height: 50px; }
nav li { display: inline-block; }
nav a { padding: 10px; color: #FFF; }
nav a:hover { background: #F60; color: #FCFCFC; border-radius: 5px; }
/*--------------------------------------------------*/
.menu {
width: 100%;
height: 35px;
background: #666;
position: absolute;
top: -100px;
z-index: -1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
float: right;
padding: 12px 15px;
color: #666;
background: #FFF;
border-radius: 5px;
margin: 5px 5px 0 0;
cursor: pointer;
z-index: 99;
}
.menu-icon:hover { color: #F60; }
#menuToggle { display: none; }
#menuToggle:checked ~ .menu { position: absolute; top: 100px; }
.content {
width: 100%;
margin: auto;
position: absolute;
top: 60px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
/*--------------------------------------------------*/
#media screen and (max-width: 480px){
nav li { display: block; }
nav a { display: block; border-bottom: 1px solid #666; padding: 0; }
nav a:hover { border-radius: 0; }
.menu { height: auto; top: -350px; }
#menuToggle:checked ~ .content { position: absolute; top: 370px; }
}
</style>
/------------------CSS End--------------------/
/------------------HTML Start--------------------/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/PPGD_styles" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/PPGD_styles.css">
<title>Phil Padilla | Portfolio</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="engine1/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'>
</head>
<body>
<td align="left" valign="top" bgcolor="#FF6600">
<div id="topdiv">
<div id="container">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<div id="brand2">GRAPHIC
<div id="brand">PHIL</div>
</div>
<p><br />
</p>
<div id="brand3">DESIGN
<div id="brand1">PADILLA</div>
</div>
<p> </p>
</div>
</div>
<nav class="menu">
<ul>
<li>PORTFOLIO</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</nav>
<p> </p>
<p> </p>
<table width="942%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
/------------------HTML End--------------------/

Answer 1

Your new logo layout example. Just needs a few spans wrapped in a div:
.brand {
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #F60;
line-height: 0.8;
text-transform: uppercase;
}
.name {
display: block;
float: left;
}
.name span {
display: block;
margin-left: 10px;
}
.title {
margin-left: -54px;
color: #666;
}
.title span {
display: block;
margin-left: 118px;
}
<div class="brand">
<span class="name">Phil <span>Padilla</span></span>
<span class="title">Graphic <span>Design</span></span>
</div>
It is now capitalized in the CSS, not the HTML. This way when indexed by search engines, it wont look like SHOUTING :)
There are many things that could be improved, but the problem in your question is caused by the nav being outside the div the checkbox is in, as it is selected with the sibling selector (~).
Unite the siblings, simply place the nav underneath the menu label:
<div id="container">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<nav class="menu"> </nav>
Working Example
The top positioning needs to be changed. I have incorporated the new logo into this example.
body {
background: #fff;
margin: 140px 0px 0px 0px;
font-family: 'Open Sans', sans-serif;
}
/*--------HEADER Start----------*/
div#topdiv {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
color: #0F0;
background: #FFF;
opacity: 0.9;
padding: 0px 0px 0px 0px;
z-index: 99;
height: 58px;
box-shadow: 0px 0px 5px 0px rgba(138, 136, 138, 1);
z-index: 99;
}
div#menucontainer {
height: 58px;
float: right;
margin-right: 10px;
padding: 0px;
display: block;
}
div#container {
max-width: 942px;
min-width: 320px;
margin: 0 auto;
padding: 0px;
position: relative;
height: 0px;
display: block;
margin-left: auto;
margin-right: auto;
}
/*--------LOGO Start----------*/
.brand {
font-size: 22px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
color: #F60;
line-height: 0.8;
text-transform: uppercase;
margin: 10px;
float: left;
}
.name {
display: block;
float: left;
}
.name span {
display: block;
margin-left: 10px;
}
.title {
margin-left: -54px;
color: #666;
}
.title span {
display: block;
margin-left: 118px;
}
/*--------LOGO End----------*/
/*--------MENU Start----------*/
* {
padding: 0;
margin: 0;
}
body {
font-family: Open Sans;
}
a {
text-decoration: none;
color: #666;
}
li {
list-style-type: none;
}
nav {
text-align: center;
float: right;
padding: 15px;
display: block;
border-bottom: 1px;
height: 19px;
margin-top: 20px;
margin-right: 10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
letter-spacing: 0.125em;
color: #666;
line-height: 100%;
}
nav:hover {
float: right;
display: block;
height: 19px;
margin-top: 20px;
margin-right: 10px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
letter-spacing: 0.125em;
color: #f60;
cursor: pointer;
line-height: 100%;
border-bottom-style: solid;
border-bottom-color: #f60;
}
nope {
position: absolute;
width: 260px;
height: 100%;
background: none;
}
div#SAVE {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px #F60;
transition: background-color 500ms ease-out 1s;
}
}
/*--------MENU End----------*/
/*--------HEADER End----------*/
/*--------FOOTER Start----------*/
div#footer {
height: 30px;
bottom: 0px;
width: 100%;
background: #666;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
box-shadow: 0px -1px 5px 0px rgba(138, 136, 138, 1);
color: #FFF;
}
/*--------FOOTER End----------*/
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Open Sans' sans-serif;
}
a {
text-decoration: none;
color: #666;
font-size: 14px;
}
li {
list-style-type: none;
}
header {
width: 100%;
height: 50px;
margin: auto;
border-bottom: 1px solid #EEE;
background: #FFF;
z-index: 99;
}
.container {
max-width: 942px;
min-width: 320px;
margin: 0 auto;
padding: 0px;
position: relative;
height: 0px;
display: block;
margin-left: auto;
margin-right: auto;
}
nav {
width: 100%;
text-align: center;
}
nav ul {
line-height: 50px;
}
nav li {
display: inline-block;
}
nav a {
padding: 10px;
color: #FFF;
}
nav a:hover {
background: #F60;
color: #FCFCFC;
border-radius: 5px;
}
/*--------------------------------------------------*/
.menu {
width: 100%;
height: 35px;
background: #666;
position: absolute;
top: -100px;
z-index: -1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
float: right;
padding: 12px 15px;
color: #666;
background: #FFF;
border-radius: 5px;
margin: 5px 5px 0 0;
cursor: pointer;
z-index: 99;
}
.menu-icon:hover {
color: #F60;
}
#menuToggle {
display: none;
}
#menuToggle:checked ~ .menu {
position: absolute;
top: 100px;
}
.content {
width: 100%;
margin: auto;
position: absolute;
top: 60px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
/*--------------------------------------------------*/
#media screen and (max-width: 480px) {
nav li {
display: block;
}
nav a {
display: block;
border-bottom: 1px solid #666;
padding: 0;
}
nav a:hover {
border-radius: 0;
}
.menu {
height: auto;
top: -350px;
}
#menuToggle:checked ~ .content {
position: absolute;
top: 0;
}
}
<div id="topdiv">
<div id="container">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
<nav class="menu">
<ul>
<li>PORTFOLIO
</li>
<li>RESUME
</li>
<li>CONTACT
</li>
</ul>
</nav>
<div class="brand">
<span class="name">Phil <span>Padilla</span></span>
<span class="title">Graphic <span>Design</span></span>
</div>
</div>
</div>