Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by CandiAnne

  1. I am working on a site to make it look and work like the images below. I got the push menu figured out because I found the tutorial here. I have the 2nd div for the line toggle and and the logo and the 3rd div for the main content Problem is I don't know how to make the 2nd div full length height: 100% didn't work nor do I knoq how to center the lines on top or center the logo in the center of the div's length. Underneath the photos is my current code. Please assist as this is a ballpark I've never played in. Thank you in advance !!!!!!!!! <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; } img { display: block; margin: auto; width: 50%; } @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()">&times;</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()">&#9776; <div><img src="here.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.marginLeft= "0"; } </script> </div> <div>This is a the main content area</div> </body>
  • Create New...