What have I missed or dont understand fully:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
font: normal 1.2em Verdana;
background: #555;
color: #FFF;
box-sizing: border-box;
}
header div:first-child {
display: flex;
border-bottom: 1px solid;
}
footer {
border-top: 1px solid;
text-align: center;
color: greenyellow;
font-size: 0.75em;
padding: 0.5em;
}
header div:first-child, footer {
background: #222;
border-width: 0.25em;
}
header div:first-child, footer {
border-color: blue;
}
header h1, header ul {
flex: 50%;
}
header ul {
text-align: right;
}
header li {
display: inline-block;
padding: 0.5em;
}
header li span {
color: #A5D6A7;
}
header li a {
color: inherit;
text-decoration: none;
}
header li a:hover {
color: red;
}
header label {
display: none;
}
#showMenu {
display: none;
}
@media only screen and (max-width: 1000px) {
header ul {
display: none;
}
header label {
display: inline-block;
}
header label:hover {
color: red;
}
#showMenu:checked ~ header ul,
#showMenu:checked ~ header ul li {
display: block;
}
#showMenu:checked ~ div div:last-child {
display: block;
}
}
header div div:last-child{
display:none;
}
</style>
</head>
<body>
<header>
<div>
<h1>MyCompanyName</h1>
<label for="showMenu" title="Show/Hide Menu">≡</label>
<input id="showMenu" type="checkbox">
<ul>
<li>Test</li>
<li><a href="">Link</a></li>
<li><span>Active</span></li>
</ul>
<div>Can I be hid and shown?</div>
</div>
<div>
Your slogan here...
</div>
</header>
<footer>
Footer
</footer>
</body>
</html>I can't get the menu to reappear... I must be mis-undstanding something, is it the document flow or a CSS problem...
any help/advice would be greatly appreciated.
