I have a one page site but a full screen hamburger menu. Menu items are linked to anchors in the page. How do I get the menu to go when I click a menu item?
HTML
<label for=”hamburger-checkbox” class=”hamburger”>
<div class=”hamburger-item1″></div>
<div class=”hamburger-item2″></div>
<div class=”hamburger-item3″></div>
</label>
<div class=”sidebar”>
<li id=”text”>Specialist Services
<li id=”text”>Tax Services
<li id=”text”>IT Services
<li id=”text”>About Us
<li id=”text”>Resources
<li id=”text”>Contact Directory
<li id=”text”>Our Team
</div
CSS
.hamburger {
z-index: 888;
position: fixed;
top: 15px;
right: 20px;
cursor: pointer;
width: 60px;
}
.hamburger-item1 {
background-color: #fff;
width: 100%;
height: 10px;
margin-bottom: 8px;
}
.hamburger-item2 {
background-color: #fff;
width: 100%;
height: 10px;
margin-bottom: 8px;
}
.hamburger-item3 {
background-color: #fff;
width: 100%;
height: 10px;
margin-bottom: 8px;
}
.sidebar {
position: fixed;
top: 0;
z-index: 880;
right: -100%;
width: 100%;
height: 100%;
padding-top: 80px;
background-color: #eee;
transition: right .2s;
}
.sidebar ul {
padding-left: 0;
}
.hamburger-checkbox:checked ~ .hamburger {
background-color: #000;
}
#hamburger-checkbox:checked ~ .sidebar {
right: 0;
}
#hamburger-checkbox {
display: none;
}
#menu {
text-decoration: none;
font-family: “Barlow Semi Condensed”, sans-serif;
line-height: 1.5;
font-weight: 300;
font-size: 150%;
text-align: center;
text-transform: