HTML content beneath the fixed navigation - javascript

how do i put my content just beneath my navigation. Every time i put some text inside the it just goes behind the green background and gets covered up by the navigation. Please kindly help me how to put my text beneath the navigation
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E9600;
position: fixed;
top: 0;
width: 100%;
height:75px;
}
li {
float: left;
height:75px;
border-right: 5px solid red;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: #4CAF50;
}
</style>e>
</style>
<head>
<title> E-Benta </title>
<ul>
<li> <img src="logo.png"> </img>
<li>Home </li>
<li>Products
<li>About us
<li>Contact us
</ul>
</head>
<spacer>testing </spacer>
</body>
</html>

If you add to your this code:
spacer {
display: block;
margin-top: 75px;
}
Everything will be ok. Just add margin-top bigger than height of fixed menu.
Check snippet here: http://codepen.io/Dzongkha/pen/PbbvLZ

You need to leave space at top (as much as header). You can use margin top for that.
inline code would be
<spacer style="margin-top:90px;float: left;">testing </spacer>
You can create class for that and assign to spacer as well.
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E9600;
position: fixed;
top: 0;
width: 100%;
height:75px;
}
li {
float: left;
height:75px;
border-right: 5px solid red;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: #4CAF50;
}
</style>e>
</style>
<head>
<title> E-Benta </title>
<ul>
<li> <img src="logo.png"> </img>
<li>Home </li>
<li>Products
<li>About us
<li>Contact us
</ul>
</head>
<spacer style="margin-top:90px;float: left;">testing </spacer>
</body>
</html>

As i seen here your code html structure is not proper, It should be like
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- YOUR CSS <style> or <link> tag GOES HERE -->
</head>
<body>
<!-- YOUR CONTENT ELEMENT SHOULD BE HERE -->
</body>
</html>`
body{
margin-top:60px; /* IF Navigation is fixed top you have to put margin top to body as header hight */
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 60px;
}
li {
float: left;
border-right: 5px solid #ddd;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #fff;
text-align: center;
padding: 22px 15px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #fff;
color:#333;
}
.active {
background-color: #4CAF50;
}
/*MAIN CONTENT CSS HERE*/
.main-content-here{
padding:15px;
}
<ul>
<li><img src="logo.png" /></li>
<li>Home </li>
<li>Products </li>
<li>About us </li>
<li>Contact us </li>
</ul>
<div class="main-content-here">
<spacer>testing</spacer>
</div>
AND last
Practice make perfect!!!! :)

Related

Incorrect work of the desktop and adaptive menu when hovering and clicking

I want to make an adaptive menu. The problem now is that in the desktop version, when you click on a menu item and its sub-items, it closes, and should only work while I am hovering over it. And in the mobile version with an adaptive less than 520px, it also closes when you click on a sub-menu item, and this is bad.
I need hover to work only in desktop version. Also I need a menu to not get closed after the click on the sub-items.
That also goes for mobile version.
$('.drop__down-menu').on('click', function(){
$(this).children('.drop__down-list').slideToggle();
});
.header__menu-inner {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.menu__header {
max-width: 750px;
}
.menu__header li {
display: inline-block;
}
.menu__header li + li {
margin-left: 30px;
}
.menu__header a {
font-size: 15px;
line-height: 42px;
text-transform: uppercase;
font-weight: 500;
color: #333;
}
.menu__header a:hover {
color: blue;
}
.drop__down-menu {
position: relative;
padding-bottom: 20px;
margin-top: 20px;
}
.drop__down-list {
display: none;
position: absolute;
top: 61px;
left: 0;
width: 270px;
background-color: #fff;
padding: 20px;
border-top: 1px solid blue;
color: #fff;
font-size: 15px;
box-shadow: 0px 5px 40px 0px rgba(82, 85, 90, 0.2);
border-top: 1px solid blue;
z-index: 2;
}
.drop__down-list li {
width: 100%;
}
.drop__down-list li + li {
margin-left: 0;
}
.drop__down-list li a {
display: block;
line-height: 44px;
padding: 0 10px;
text-transform: capitalize;
}
.drop__down-list li a:hover {
color: #fff;
background-color: blue;
}
.drop__down-menu:hover .drop__down-list {
display: block;
}
#media (max-width: 520px) {
.header__user-nav + .header__user-nav {
margin-left: 5px;
}
.menu__header {
margin-left: auto;
}
.menu__header a {
line-height: 30px;
}
.menu__header-btn {
width: 30px;
}
.menu__header-btn span {
height: 4px;
}
.menu__header-btn span + span {
margin-top: 3px;
}
.menu__header-list {
left: 0;
top: 56px;
}
.menu__header-list li {
display: block;
border-bottom: 1px solid #0c0c0c;
}
.menu__header-list li a {
display: block;
}
.menu__header li + li {
margin-left: 0;
}
.drop__down-list {
width: 100%;
}
.header__menu-inner {
min-height: 55px;
}
.drop__down-list {
padding: 0 12px;
top: 40px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrap">
<div class="content">
<header class="header">
<div class="header__menu-inner">
<nav class="menu__header">
<div class="menu__header-btn">
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu__header-list">
<li class="drop__down-menu">
Home
<ul class="drop__down-list">
<li>Home One Multi User</li>
<li>Home Two Single User</li>
<li>Home Three Product</li>
</ul>
</li>
<li class="drop__down-menu">
All products
<ul class="drop__down-list">
<li>Recent Items</li>
<li>Popular Items</li>
<li>Featured Items</li>
</ul>
</li>
<li class="drop__down-menu">
Wordpress
<ul class="drop__down-list">
<li>Popular Items</li>
<li>Admin Templates</li>
<li>Blog / Magazine / News</li>
</ul>
</li>
<li>Festures</li>
<li class="drop__down-menu link__mega-menu">
<a class="drop__down-link" href="#">Pages</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I hope this answer helps you!
#media (min-width: 520px){
.drop__down-menu:hover .drop__down-list {
display: block;
}
I think you should adapt CSS style for mobile first.
then add #media (min-width: x) for large devices not inversely

How to dropdown or hide and show submenu with EventListener in javascript?

Basically, My subtopics element is hiding, i want subtopics element show once we clicked at Topics element and hide subtopics element again once we clicked at Topics. Just like hide and show elements
I'm trying to use classList with addEventListener when i run code it shows up there is an error which didn't works for me.
I also found out that most of people are using jquery because it's very easy, but for me i want to practice in javascript first.
I'm still looking forward to the situation that works for me. If anyone know how to code with this function please give me some solution thank you very much.
Here is my code please take a look.
var togglemenu = (function () {
var togSubtopics = document.getElementById("subtopics");
togSubtopics.addEventListener("click", function () {
togSubtopics.classList.toggle("show");
});
return {
togglemenu: togglemenu()
};
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*subtopics*/
#subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
.show {
display: block;
}
#subtopics ul {
margin: 0;
padding: 0;
}
#subtopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#mainmenu li:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="mainmenu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Topics
<div id="subtopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script src="index2.js"></script>
</body>
</html>
One possible way to do that:
just onclick - toggle that element's class (add or remove class show)
And in CSS add rules that give display: block to .submenu that is under .show
UPD Before show subitems of any item - make sure that you have hidden other opened submenus
(function () {
var menuElems = document.querySelectorAll("#mainmenu ul > li")
menuElems.forEach(function(elem){
elem.addEventListener("click", function(){
//hide all open submenus
menuElems.forEach(function(e){
e.classList.remove("show");
})
//show the one that is clicked right now
elem.classList.add("show");
}, false)
});
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*subtopics*/
.subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
.show .subtopics{
display: block;
}
.subtopics ul {
margin: 0;
padding: 0;
}
.subtopics li {
display: block;
}
.subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#mainmenu li:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="mainmenu">
<ul>
<li>Logo</li>
<li>Home
<div class="subtopics">
<div id="column1" class="columns">
<ul>
<li>Home_example1</li>
<li>Home_example2</li>
<li>Home_example3</li>
</ul>
</div>
</div>
</li>
<li>Topics
<div class="subtopics">
<div id="column1" class="columns">
<ul>
<li>Topic_example1</li>
<li>Topic_example2</li>
<li>Topic_example3</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script src="index2.js"></script>
</body>
</html>
UPD
Code that removes show class from menuElems onclick to subtopic
var subtopicElems = document.querySelectorAll(".subtopics ul > li a")
subtopicElems.forEach(function(item){
item.addEventListener("click", function(event){
menuElems.forEach(function(menuElem){
menuElem.classList.remove("show")
})
event.stopPropagation(); //gotta stop bubbling
}, false)
})
about Bubbling and Capturing

Trying to figure out how to make a hamburger menu stay stationary once it is opened

From this demo
https:// codepen.io/ducktectiveQuack/pen/mPGMRZ
I can't figure out the code block so I made cheating (just delete the space between the '/' and the 'c' lol)
I am trying to make it so that once you click on the hamburger menu, the drop-down appears but nothing more. The menu shifts to the right and then it shift again after you hover over the social tab. I just want it to remain stationary the entire time, even after it drops-down.
I am still pretty new to HTML/CSS and especially JavaScript (my prof helped me with this) so my apologies if this seems like a really basic question.
I thought that simply putting 'position:fixed' or 'position:absolute' would do the trick but it does not haha.
Thank you in advance
the dropdown appears but nothing more. as you can see, right now the
menu shifts to the right. it then shifts again after you hover over
the social tab. I just wan it to remain stationary the entire time,
even after it drops down.
Try setting #menu position to absolute , .nav li:hover ul position to absolute, top to 200px, left to 0px. Note, html is missing closing </header> tag.
#menu {
position:absolute;
}
.nav li:hover ul {
position:absolute;
top:200px;
left:0px;
}
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
body {
background-color: #a3d5d3;
}
#menu {
position:absolute;
}
.nav li:hover ul {
position:absolute;
top:200px;
left:0px;
}
<!doctype html>
<html lang="en">
<head>
<title>Banana | Home</title>
</head>
<style>
body {
padding: 0;
margin: 0;
background-image: url("img/vicmensa.jpg");
background-color: #515151;
}
header {
margin: 40px 0px 0px 60px;
position: fixed;
}
#container {
margin: 150px 0px 0px 400px;
text-align: left;
position: fixed;
color: white;
font-size: 24pt;
font-family: monospace;
}
.title-block {
margin: 20px 0px 0px 30px;
text-align: left;
color: #00b4ff;
font-family: monospace;
font-size: 24pt;
}
.text-block {
margin: 0px 0px 0px 30px;
width: 400px;
text-align: left;
color: white;
font-family: monospace;
font-size: 16pt;
}
.nav {
display: none;
text-align: left;
font-size: 14pt;
}
.nav a:hover {
color: white;
text-decoration: none;
}
.nav ul {
display: none;
background: none;
}
.nav li:hover ul {
display: block;
}
a {
text-decoration: none;
color: #00b4ff;
}
li {
list-style: none;
}
.burger-button {
background: none;
position: absolute;
border: 0;
color: white;
outline: none;
font-size: 20pt;
font-family: monospace;
}
.x-button {
background: none;
position: absolute;
border: 0;
color: white;
outline: none;
font-size: 20pt;
font-family: monospace;
}
</style>
<body>
<header>
<button class="burger-button" onclick="
if (document.getElementById('menu').style.display=='block')
{
document.getElementById('menu').style.display = 'none'
}
else
{
document.getElementById('menu').style.display = 'block'
/*make the hamburger icon an X and get it to stop moving positions*/
}
"><span style = "color: white;">☰</span>
</button>
<!-- nav -->
<ul class="nav" id="menu">
<li> Home
</li>
<li> About
</li>
<li> Contact
</li>
<li> Music
</li>
<li> Pictures
</li>
<li> Projects
</li>
<li> Resume
</li>
<li> Social +
<ul>
<li> Facebook
</li>
<li> Twitter
</li>
<li> Instagram
</li>
<li> LinkedIn
</li>
</ul>
</li>
</ul>
<!-- end nav -->
</header>
<div id="container">
<div class="title-block">
first middle last
<hr style="width: 100%; height: 2px; background-color: white; border-radius: 2px; margin: 0px 0px 5px 0px;">
</div>
<div class="text-block">
<span style="color: #00b4ff"><em> noun </em></span>
<br>city, state
<br>junior at university
<br>
</div>
</div>
</body>
</html>
codepen https://codepen.io/anon/pen/GZXvOR

Can't click elements in my 'content' div

I have some text and a YouTube video on my website (aka: http://redstonegaming.com), and it won't let me start the video. Any help would be greatly appreciated. Also, when I set the content div to z-index: 99, it works but my dropdown menu goes under the content. Vice versa.
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
kkeys = []; // <-- Change here
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.pause(); // <-- another issue
}
}
});
/*Some Fonts Here:*/
#font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background
{
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position:absolute;
}
.menubar {
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 50%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 100%;
margin: 0px auto;
text-align: center;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
transition: all linear 0.15s;
color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: rgba(189, 34, 34, 1);
}
.menu .arrow {
font-size: 0.95vw;
line-height: 0%;
}
.menu > ul > li {
float: middle;
display: inline-block;
position: relative;
font-size: 1.2vw;
}
.menu > ul > li > a {
padding: 0.7vw 5vh;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
.menu li:hover .sub-menu {
display: block;
z-index: 99;
}
.sub-menu {
width: 100%;
padding: 0px 0px;
position: absolute;
top: 100%;
left: 0px;
display: none;
transition: opacity linear 5.8s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 1.2vw;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #3e3436;
}
.Rusty
{
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
}
.content
{
opacity: .85;
position: relative;
margin: auto;
width: 80%;
z-index: -1;
background-color: #CCCCCC;
padding: 10px;
height: 100%;
}
.menu > ul > .login
{
position: absolute;
top: 0;
right: 0;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
width: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:15;
left:15%;
right:15%;
width: 25vw;
height:25vh;
}
.title
{
text-align: center;
font-size: 7vh;
text-decoration: underline;
-moz-text-decoration-color: inherit;
text-decoration-color: inherit;
}
.feed-column
{
width: 50%;
}
.text-center
{
text-align: center;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"
name="www-subscribe-widget" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="script.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<title>RG - Home</title>
</head>
<body class="background">
<div class="menubar">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="aboutme.html">About Me
<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
Gaming
</li>
<li>
Programming
</li>
<li>
YouTube
</li>
<li>
Other
</li>
</ul>
</li>
<li>
Schedule
</li>
<li class="current-item">
<a href="#">
<p class="rusty">RedstoneGaming</p>
</a>
</li>
<li>
Equipment
</li>
<li>
Contact Me
</li>
<li class="login">
Login/Sign Up
</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="rusty title">ThatRedstoneGuy's Feed</h1>
<div class="feed-column">
<h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
</div>
</div>
<div class="feed-column">
</div>
</div>
</body>
</html>
Your <body class="background"> is covering the .content div because you have z-index: -1; on the content class in your css file. You should be safe to just remove it, if not then change it to 1 and add z-index: 2; to your .menubar class.
You can see this in either Firefox or Chrome by using developer tools Inspect Element to see the layout of the page as it is rendered in the browser.
Firefox Inspect Element
Chrome Inspect Element
EDIT:
After playing around for a while I found a solution. The z-index has some relation that I don't completely understand with whether the position is static or relative/absolute. So after experimentation I was able to get the menu to work properly by adding position: relative; to the .menubar class.
Your class specified here:
<div class="content">
is giving you this problem, maybe will conflict with an other same class name defined else where.
If I change this class name then your video works (just for testing purpose I have renamed to contents:
<div class="contents">
Check the diddle here:
https://jsfiddle.net/te8sxvgq/

create hamburger menu in javascript

I need help creating a hamburger menu in javascript. What's the most efficient way to create this without using jquery? The javascript code that I have at the bottom should work but I'm missing something else.
<html>
<head>
<style>
.hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.75em;
border-top: 0.18em solid #000;
border-bottom: 0.18em solid #000;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.18em solid #000;
}
</style>
</head>
<body>
<span class="hamburger"></span>
<li>Development</li>
<li>Illustrations</li>
<script type="text/javascript">
var myEl = document.getElementById('hamburger');
myEl.addEventListener('click', function() {
this.classList.toggle('activated');
}, false);
</script>
</body>
</html>
The question was
What's the most efficient way to create this without using jquery?
So pure CSS would be OK, I presume?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hamburger Menu</title>
<style>
ul {
list-style-type: none;
position: relative;
top: -200px;
transition: all .5s ease;
margin-right: 10px;
}
.nav {
display: none;
}
#nav:checked ~ ul {
top: 0;
}
#nav {
display: none;
}
.navmenu {
position: relative;
display: block;
margin: -1ex 10px -2ex 10px;
padding: 5px 20px;
background: linear-gradient(to right, #445566, #888);
color: #fff;
z-index: 999;
/* The UX expert said so */
cursor: pointer;
}
li {
background: linear-gradient(to right, #445566, #888);
color: white;
padding-left: 5em;
padding-top: 1ex;
margin-left: -30px;
}
</style>
</head>
<body>
<div class="navigation">
<input type="checkbox" id="nav">
<label for="nav" class="navmenu">☰</label>
<ul>
<li>First entry</li>
<li>Second entry</li>
<li>Third entry</li>
<li>Fourth of July entry</li>
</ul>
</div>
</body>
</html>
The positioning is a bit ugly, admitted, but you can finetune yourself.
The navigation-list is over the top first and rolls down when you check the checkbox. The "burger" is in the label element for the checkbox and checking/unchecking the checkbox changes the value of the attribute top of the ul element.
You are right. It should be getElementsByClassName:
var myEl = document.getElementsByClassName('hamburger')[0];

Categories

Resources