Check out these images to see my progress: Main Image. When you click on the menu, everything shifts right.
I've managed to set up the push menu, toggle switch menu, and main divs. Now I need help with centering the 3 lines that are clicked within the div, making the div stretch the length of the page, and aligning the logo in the middle of the div.
Here's the code I'm currently working with:
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #212121;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav p {
position: absolute;
bottom: 100px;
color: #CACFD2;
font-size: 12px;
left:10%;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.sidenav a.mail {
color: #CACFD2;
font-size: 12px;
left:10%;
padding: 0;
text-decoration: none;
}
#logozone {
background-color: #212121;
transition: margin-left .5s;
float: left;
width: 10%;
height: 100%;
padding: 2px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 2px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Home</a>
<a href="#">Current Projects</a>
<p>client info</p>
</div>
<div id="logozone">
<span style="text-align:center; font-size:30px;color:#CACFD2;cursor:pointer" onclick="openNav()">☰
<div><img src="logo.jpg"></div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("logozone").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("logozone").style.mar...
</script>
</div>
<div>This is a test</div>
</body>
</html>
Can someone assist with this new coding challenge? Thank you - it's an area I'm not too familiar with!